6

我正在制作一个顶部有经典导航的单页网站。现在，我将链接设置为哈希标签，以便在页面内导航：

<nav>
<a href="#about">About</a>
</nav>
...
<section id="about">...</section>

显然，这是可行的，但跳转到 about 部分是即时的，而不是渐进的。我正在寻找一个非常简单的实现，以便逐步过渡。我不想要任何花哨的东西。没有轴、偏移或任何其他选项。我只希望滚动过渡是渐进的。我想要的唯一设置是完成滚动所需的时间。另外，我想对我的标记几乎不做任何更改。我见过几个 javascript 插件，它们要求您使用锚标记来设置 html 文档中的位置——我不希望这样。这个网站看起来很有希望，但我不知道如何设置它。没有演示，所以我看不到如何设置它。我不是那么懂 Javascript。此外，ScrollTo 插件对于 jQuery 来说太复杂了。我愿意使用一个有很多选项的插件，但我只是不希望这些选项阻止我弄清楚如何设置它。

任何帮助将非常感激！

4

4 回答 4

16

这是我发现的最好的方法——它只使用普通的锚，但扩展了它们的功能

$('a').click(function() {
    var elementClicked = $(this).attr("href");
    var destination = $(elementClicked).offset().top;
    $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-15}, 500);
});

这是一个活生生的例子

于 2012-05-01T20:06:55.490 回答
6

我使用直接 jquery 来做到这一点。

我有一个这样的链接->

<a href="1" class="scrolling">Go to 1</a>

然后使用 jquery 它会向下滚动到一个 div 与另一个 id 为“1”的锚点

$("a.scrolling").click(function(e) {
    e.preventDefault();
    goToByScroll($(this).attr("href"));
});

function goToByScroll(id) {
    $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');                               
}
于 2012-05-01T20:04:07.340 回答
2

Javascript中有ScrollTo。这是一个窗口事件。在这里查看： https ://developer.mozilla.org/en/DOM/window.scrollTo

于 2012-05-01T20:05:33.253 回答
0

我在互联网上找到了这段代码，同时寻找一种快速创建此滚动效果的方法。

html代码：

<a href="#services">Jump to services</a>
<div id="services"></div>

jQuery代码：

$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
    e.preventDefault();

    var target = this.hash,
    $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 900, 'swing', function () {
        window.location.hash = target;
    });
});

});

这是代码源。

于 2014-06-02T21:42:25.553 回答