Quantcast
Channel: SharePoint 2013 - Development and Programming forum
Viewing all articles
Browse latest Browse all 7589

Smooth Scrolling on Sharepoint Site

$
0
0

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.


Viewing all articles
Browse latest Browse all 7589

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>