jquery在单个哈希锚上平滑滚动以获取顶部

Question

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

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

点击锚链接时效果很好：

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

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

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

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

我知道如果链接调用页面上第一个元素的 id 一切正常， 只是想知道是否有办法使用单个哈希在顶部平滑滚动

Answer 1

我建议在部分添加锚点 data-anchor-offset="30" 并检查锚点。根据您的情况，将使用 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);
});

Answer 2

您可以向链接 .gototop 添加一个类，它会起作用。您将在 scrollTop 中添加 0，它将转到页面顶部 :)

$('.gototop').on('click', function (event) {
    event.preventDefault();
    $('html,body').animate({
        scrollTop: 0
    }, 500);
});

您的代码不起作用，因为如果在哈希之后您不添加元素的 ID，它将不会获得元素的偏移量。 $(this.hash) 与 $("#divid") 相同，将选择 ID 为 divid 的元素，并且因为您在 # 之后没有给出任何内容，所以它不会接收到搜索偏移量的元素，这会导致一个错误。如果你检查你的控制台，它会显示这个：

Uncaught TypeError: Cannot read property 'top' of undefined :)

Answer 3

Giannis Grivas 的答案连接到 StackOverflow 的其他几个解决方案

Nota bene：我完全是 JQuery 的傻瓜。我刚刚连接了几个解决方案，它可以工作！

HTML：

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

查询：

$(function() {
        $('a[href*="#"]').click(function() {
            if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {                    
                var defaultAnchorOffset = 0;
                var $anchor = $('#' + this.hash.substring(1));
                var anchorOffset = $anchor.data('anchor-offset');

                var href = $.attr(this, 'href');                    

                if (!anchorOffset)
                    anchorOffset = defaultAnchorOffset;
                var offset = $anchor.offset() === undefined ? 0 : $anchor.offset().top;

                $('html, body').animate({
                  scrollTop: offset - anchorOffset
                  }, 500, 
                    function () {
                      window.location.hash = href;
                    }
                  );
                return false;
            }
        });
    });