jquery 在单个哈希 anchor 上平滑滚动以到达顶部

Question

我使用这个jquery平滑滚动功能:

$('a[href*=#]').on('click',function(event){
//event.preventDefault(); // nope
$('html,body').animate({scrollTop:$(this.hash).offset().top},500); 
});

单击 anchor 链接时它可以完美运行:

<a href="#section1">smooth scroll</a>

除非单击单个哈希返回顶部，例如:

<a href="#">home</a>

在这种情况下，我看到页面顶部，但没有平滑滚动效果..

我知道，如果链接调用页面上第一个元素的 id，则一切正常， 只是想知道是否有一种方法可以使用单个哈希来平滑地滚动到顶部

Answer 1

我建议在部分添加 anchor data-anchor-offset="30"并检查 anchor 。根据您的情况，将使用 defaultAnchorOffset。在这里进行一个工作演示:http://jsfiddle.net/v4tzngmr/

$('a[href*=#]').on('click',function(event){
     event.preventDefault();
    var defaultAnchorOffset = 0;
    var $anchor = $('#' + this.hash.substring(1));
    var anchorOffset = $anchor.data('anchor-offset');

    if (!anchorOffset) // for when anchor doesn't have the offset attribute like Section 4
    anchorOffset = defaultAnchorOffset;
    var offset = $anchor.offset() === undefined ? 0 : $anchor.offset().top;
    $('html,body').animate({
        scrollTop: offset - anchorOffset
    }, 500);
});