如何获得锚链接，使其在向下滚动时像在其上一样平滑地向上滚动？

Question

我正在尝试让页面平滑地滚动到顶部锚点，就像向下滚动到底部锚点时一样。 但是，它没有平滑滚动，而是跳跃而没有任何动画。

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

的JavaScript

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

Answer 1

<a href="#myAnchor" name="topAnchor" id="anchor1">的ID错误，将其设置为id="topAnchor" ，它将可以正常工作。

Answer 2

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

这是顶部锚元素的更新的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。