Blog养成记(14) 让同页滚动更平滑

上一期说到增加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');
}

上面的代码基本就可以直接使用了。它将.smoothScrollhashchange进行绑定,将<a>的hrefhash传入。

此外,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,从而获得该网页的偏移量。

版本控制

Version Action Time
1.0 Init 2018-08-18
1.1 解决中文乱码 2018-08-25