On my Sharepoint site, I am trying to implement a Smooth scroll using jQuery which goes to the relevant section. I realise on Sharepoint you have to use #s4-workspace as the scrolling body. My issue is that it scrolls perfectly the first time, but then when you next click on a menu item, it seems to scroll to a random position.
See my code below:
HTML:
<ul id="sticky" class="nav navbar-nav section-menu-list"><li><a href="#unit1" class="scroll">Unit1</a></li><li><a href="#unit2" class="scroll">Unit2</a></li><li><a href="#unit3" class="scroll">Unit3</a></li><li><a href="#unit4" class="scroll">Unit4</a></li><li><a href="#unit5" class="scroll">Unit5</a></li><li><a href="#unit6" class="scroll">Unit6</a></li><li><a href="#unit7" class="scroll">Unit7</a></li><li><a class="last scroll" href="#unit8">Unit8</a></li></ul><div class="scrollto" id="unit1"><section></section></div><div class="scrollto" id="unit2"><section></section></div><div class="scrollto" id="unit3"><section></section></div><div class="scrollto" id="unit4"><section></section></div><div class="scrollto" id="unit5"><section></section></div><div class="scrollto" id="unit7"><section></section></div><div class="scrollto" id="unit8"><section></section></div>
And here is the JS:
(function ( $ ) {
var scrollers = null;
var duration = 1000;
var activeClass = "active";
$.fn.smoothScroller = function( params ) {
if (typeof params != "undefined") {
if (typeof params.duration != "undefined") {
duration = params.duration;
}
if (typeof params.activeClass != "undefined") {
activeClass = params.activeClass;
}
}
scrollers = $(this);
enableScrolling();
};
var enableScrolling = function() {
scrollers.click( function(evt) {
evt.preventDefault();
var target = $(this).attr("href");
if (target == "" || typeof target == "undefined") {
target = $(this).attr("data-target");
}
target = $(target);
if (target.length) {
$('#s4-workspace').animate({
scrollTop: target.offset().top
}, duration);
}
scrollers.removeClass(activeClass);
$(this).addClass(activeClass);
});
}
}( jQuery ));which is initialised here:
$(document).ready(function(){
$(".scroll").smoothScroller({
duration: 1000,
activeClass: "active"
});
})Any help would be really appreciated.