ZHENG Zi'ou

上一期说到增加toc侧边栏，但是直接跳转非常突兀，因此特地找了让同页跳转滚动更平滑的插件。使用步骤如下：

配置smooth-scroll插件

首先下载smooth-scroll插件，将其中jquery.smooth-scroll.js放入js文件夹中。

再在<script>中引入该js：

<script type="text/javascript" src="/js/vendors/jquery.smooth-scroll.js"></script>

基础使用

可以在自己的js文件中加入下面的代码

// Bind the hashchange event listener
$(window).bind('hashchange', function (event) {
    $.smoothScroll({
        // Replace '#/' with '#' to go to the correct target
        scrollTarget: decodeURI(location.hash.replace(/^\#\/?/, '#'))
    });
});

$('a[href*="#"]')
    .bind('click', function (event) {
        // Remove '#' from the hash.
        var hash = this.hash.replace(/^#/, '')
        if (this.pathname === location.pathname && hash) {
            event.preventDefault();
            // Change '#' (removed above) to '#/' so it doesn't jump without the smooth scrolling
            location.hash = '#/' + hash;
        }
    });

// Trigger hashchange event on page load if there is a hash in the URL.
if (location.hash) {
    $(window).trigger('hashchange');
}

上面的代码基本就可以直接使用了。它将.smoothScroll与hashchange进行绑定，将<a>的href的hash传入。

此外，decodeURI是为了解决中文url出现乱码导致的js问题。

smoothScroll可以设置网页偏移量，但是有一个问题不够灵活，如果我网站的网页偏移量不一致怎么办？

进一步传入offset

主要是将第一个与hashchange绑定的函数中增加一行：

// Bind the hashchange event listener
$(window).bind('hashchange', function (event) {
    $.smoothScroll({
         offset: $(‘body’).attr(‘data-offset’)? -$(‘body’).attr(‘data-offset’):0 ,
        // Replace '#/' with '#' to go to the correct target
        scrollTarget: location.hash.replace(/^\#\/?/, '#')
    });
});

$('a[href*="#"]')
    .bind('click', function (event) {
        // Remove '#' from the hash.
        var hash = this.hash.replace(/^#/, '')
        if (this.pathname === location.pathname && hash) {
            event.preventDefault();
            // Change '#' (removed above) to '#/' so it doesn't jump without the smooth scrolling
            location.hash = '#/' + hash;
        }
    });

// Trigger hashchange event on page load if there is a hash in the URL.
if (location.hash) {
    $(window).trigger('hashchange');
}

这句话通过body标签找data-offset属性，将该属性中的值赋给smoothScroll，从而获得该网页的偏移量。

版本控制