使用最小标记和哈希标记简单地"滚动到/向下"效果

Question

我正在制作一个单页网站,顶部有经典导航.现在我将链接设置为哈希标记,以便在页面中导航:

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

显然,这是有效的,但跳转到约一节是即时的,而不是渐进的.我正在寻找一个非常简单的实现,以便逐步过渡.我不想要任何幻想.没有轴,偏移或任何其他选项.我只是希望滚动过渡是渐进的.我想要的唯一设置是完成滚动所需的时间.另外,我想对我的标记几乎没有任何更改.我看过几个javascript插件,要求你使用锚标签来设置html文档中的位置 - 我不希望这样.这个网站看起来很有前途,但我不知道如何设置它.没有演示,所以我看不到如何设置它.我在Javascript中不是那么有文化.此外,jQuery 的ScrollTo插件太复杂了.我愿意使用一个有很多选项的插件,但我只是不希望这些选项阻止我弄清楚如何设置它.

任何帮助将非常感激!

Answer 1

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

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

这是一个实例

Answer 2

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

我有一个像这样的链接 - >

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

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

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

function goToByScroll(id) {
    $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');                               
}