jquery - jQuery - 平滑滚动只适用于顶部 - 需要它也适用于底部

Question

我试图为我的 href 元素使用平滑滚动。唯一的问题是我只能让它向上做。

现场直播在这里

如果您单击“Webdesign”框，它应该会平滑地向下滚动到.content。同样的事情，如果您点击该内容底部的按钮，它应该再次平滑地向上滚动到顶部（效果很好） - 它向下到“网页设计”内容的开头它不起作用。

网站底部使用的脚本：

<script type="text/javascript">
$("a[href^='#']").click(function(){ 
var contentPosTop = $('.content').position().top;

$('html, body').stop().animate({
    scrollTop: contentPosTop
}, 1500);
});
</script>

有任何想法吗？

Answer 1

在 Firebug 中，它说 contentPosTop 为 0。我不知道为什么，但我没有调查它，因为我认为您不需要计算该值。您将在任何选项中向下滚动相同的距离（徽标 + 菜单高度）。试试 660 之类的，看看它是否有效。至少在我的测试中确实如此。

$("a[href^='#']").click(function(){ 
$('html, body').stop().animate({ scrollTop: 660 }, 1500);
});

编辑：回到顶部

   $('#starter-template').click(function() {
    $('html, body').stop().animate({ scrollTop: 0}, 1500);
    });