Question

如何点击链接时，它会滚动到当前页面上的div。我试图建立一个单页的网站（所有部分将位于一页）

P; S这是我试图实现的一个例子：http://aresiio.com/

Answer 1

像这样：

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

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

在您的示例中，您需要确保导航设置为position：fixed。

这将使您的页面跳转到该部分。如果你想添加一些动画来使事情顺利，你可以使用jQuery：

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

Answer 2

执行此操作的首选方法是使用命名锚点，而不是Javascript或CSS。

如果你在div之前放置一个像<a id="section-1"></a>这样的锚元素，你可以使用<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。

在链接上按 - 滚动？

4 个答案: