javascript - 在链接按下 - 滚动？

Question

我怎样才能做到这一点，当您单击链接时，它会滚动到当前页面上的 div。我正在尝试制作一个单页网站（所有部分都将位于一页上）

P;S 下面是我试图完成的一个例子：http: //aresiio.com/

Answer 1

像这样：

<a href="#placeToScroll">Bananas</a>

<div id="placeToScroll">All my lovely content</div>

在您的示例中，您需要确保将导航设置为位置：固定。

这将使您的页面有点跳转到该部分。如果你想添加一点动画来让事情变得流畅，你可以使用 jQuery：

$("a").on("click", function() {
    href = $(this).attr('href');
    $(document.body).animate({
        'scrollTop': $(href).offset().top;
    }, 1000);
});

Answer 2

这样做的首选方法是使用命名锚点，而不是 Javascript 或 CSS。

如果你<a id="section-1"></a>在你的 div 之前放置一个锚元素，你可以使用链接到它<a href="#section-1">Jump to Section 1</a>，当点击链接时浏览器会滚动到那里。

这也将允许书签直接链接到该部分。

Answer 3

您可以使用简单的 html 锚标记或 jquery 来做到这一点

http://snipplr.com/view/48385/

http://www.tagindex.net/html/link/a_name.html

Answer 4

到目前为止，所有其他答案都是关于指向站点命名部分的 HTML 锚链接，例如<a href="#stuff">stuff</a>链接到<div id="stuff">more stuff</div>同一页面上。

这确实有效，但它会直接“跳转”到元素，而不是像您链接到的示例那样滚动。对于该功能，您应该使用一个 jQuery 插件，例如非常流行的scrollTo。