CODEWITHSUNDEEP
javascriptjqueryhtmlcsssharepoint
Kunal Vijan
Kunal Vijan

Reputation: 447

SharePoint back to top: not able to add class on page scroll

I am trying to add back to top to the SharePoint master page. Back to top functionality is working but on page scroll I am not able to add the class which is show/hide the icon. Below is the JS code

    if ($('#back-to-top').length) {
    var scrollTrigger = 100, // px
    backToTop = function () {
    var scrollTop = $(window).scrollTop();
    if (scrollTop > scrollTrigger) {
    $('#back-to-top').addClass('show');
    } else {
    $('#back-to-top').removeClass('show');
    }
    };

    $(window).on('scroll', function () {
    backToTop();
    });

    $('#back-to-top').on('click', function (e) {
    e.preventDefault();
    $('#s4-workspace').animate({scrollTop: 0}, 700);
    });
    }

Below HTML I have added in SharePoint master-page

<a href="#" id="back-to-top" title="Back to top">&uarr;</a>

Issue: Icon is not visible on page because its not able to add class show on scroll.

Upvotes: 0

Views: 1223

Answers (1)

Kunal Vijan
Kunal Vijan

Reputation: 447

For sharepoint instead of $(window) I used $('#s4-workspace') and its working

if ($('#back-to-top').length) {
var scrollTrigger = 100, // px
backToTop = function () {
var scrollTop = $('#s4-workspace').scrollTop();
if (scrollTop > scrollTrigger) {
$('#back-to-top').addClass('show');
} else {
$('#back-to-top').removeClass('show');
}
};

$('#s4-workspace').bind('scroll', function () {
backToTop();
});

$('#back-to-top').on('click', function (e) {
e.preventDefault();
$('#s4-workspace').animate({scrollTop: 0}, 700);
});
}

Upvotes: 1

Related Questions