如何让我的锚链接像下降时一样平滑地滚动到顶部

Question

我试图让我的页面顺利地滚动回我的顶部锚点，就像我向下滚动到底部锚点时一样。但是，它不是平滑滚动，而是在没有任何动画的情况下跳跃。

有人可以帮助我指出我可以做些什么来使其双向流畅滚动吗？

JavaScript

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 500);
    return false;
});

JSFiddle

Answer 1

<a href="#myAnchor" name="topAnchor" id="anchor1">的 ID 是错误的，将其设置为 id="topAnchor"，它会很好地工作。

Answer 2

如果您按 id 而不是按名称定位顶部锚点，它将平滑滚动。 (它的 ID 为 anchor1 。 请参阅更新的小提琴：

http://jsfiddle.net/freginold/atg8xcyd/1/

这是顶部锚元素的更新 HTML 代码：

<a name="topAnchor" href="#myAnchor" rel="" id="topAnchor" class="anchorLink">Link to the anchor</a>

Answer 3

我已经用JQuery做到了这一点。作为一个函数，它是可重用的：

function goTo(goToElement) {
        $('body').animate({scrollTop:$(goToElement).offset().top}, 1500);
}

在任何 HTML 元素中，只需设置 onclick="goTo('#id_to_goTo'("，它将平滑地滚动到您向上或向下传递的元素 id。