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一切正常，只是想知道是否有一种方法可以使用单个哈希在顶部顺利地scrool

Answer 1

我建议在各个部分添加一个锚数据-strin-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的元素，因为在＃之后你没有给出任何内容，它将不会收到一个元素来搜索偏移量并且它会导致一个错误。如果您检查控制台，它将显示：

未捕获的TypeError：无法读取未定义的属性“top”：）

Answer 3

Giannis Grivas与StackOverflow的其他几个解决方案的答案

Nota bene：我完全是JQuery的假人。我刚刚连接了几个解决方案，它确实有用！

HTML：

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

JQUERY：

$(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;
            }
        });
    });

jquery在单个哈希锚点上顺利滚动以获得最佳效果

3 个答案: