javascript - jQuery：通过锚链接滑动

Question

我加载了这个 jQuery 片段，用于通过 anchorLinks 滑动页面。

http://www.position-absolute.com/articles/better-html-anchor-a-jquery-script-to-slide-the-scrollbar/

就我而言，我在页面顶部有一个固定块（位置：固定）。因此，我需要一个增量值才能向下滑动。如果我不使用这样的 delta 值，页面会滑到很深，这样我的 anchorLink 就会被固定块隐藏。

有人知道如何解决这个问题吗？

谢谢

Answer 1

原始插件：

jQuery.fn.anchorAnimate = function(settings) {

    settings = jQuery.extend({
        speed : 1100
    }, settings);   

    return this.each(function(){
        var caller = this
        $(caller).click(function (event) {  
            event.preventDefault()
            var locationHref = window.location.href
            var elementClick = $(caller).attr("href")

            var destination = $(elementClick).offset().top;
            $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
                window.location.hash = elementClick
            });
            return false;
        })
    })
}

修改：

jQuery.fn.anchorAnimate = function(settings) {

    settings = jQuery.extend({
        speed : 1100,
          offset: 0
    }, settings);   

    return this.each(function(){
        var caller = this
        $(caller).click(function (event) {  
            event.preventDefault()
            var locationHref = window.location.href
            var elementClick = $(caller).attr("href")

            var destination = $(elementClick).offset().top;
            $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination+settings.offset}, settings.speed, function() {
                window.location.hash = elementClick
            });
            return false;
        })
    })
}

请注意，我刚刚添加了一个offset选项。因此，如果您的固定 div 的高度为 60px，那么只需调用它$('#whatever').anchorAnimate({offset: 60});

Answer 2

通过编辑此行必须有解决方案：

 window.location.hash = elementClick

更改持续时间值有助于滑动到正确的位置。但是随后窗口在滑动结束时“跳跃”了偏移值。

解决方案：我通过删除行解决了这个问题：

 window.location.hash = elementClick