jQuery:通过锚链滑动

Question

我加载了这个通过anchorLinks滑动页面的jQuery-snippet。

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

在我的例子中，我在页面的顶部有一个固定的块(position: fixed )。因此，我需要一个向下滑动的增量值。如果我不使用这样的delta值，页面就会滑得很深，这样我的anchorLink就会被固定的块隐藏起来。

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

Thx

Answer 1

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

 window.location.hash = elementClick

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

Solution：我通过删除行修复了这个问题：

 window.location.hash = elementClick

Answer 2

原始插件：

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});调用它