我正在制作一个单页网站,顶部有经典导航.现在我将链接设置为哈希标记,以便在页面中导航：
<nav> <a href="#about">About</a> </nav> ... <section id="about">...</section>
显然,这是有效的,但跳转到约一节是即时的,而不是渐进的.我正在寻找一个非常简单的实现,以便逐步过渡.我不想要任何幻想.没有轴,偏移或任何其他选项.我只是希望滚动过渡是渐进的.我想要的唯一设置是完成滚动所需的时间.另外,我想对我的标记几乎没有任何更改.我看过几个javascript插件,要求你使用锚标签来设置html文档中的位置 – 我不希望这样. This site看起来很有希望,但我不知道如何设置它.没有演示,所以我看不到如何设置它.我在Javascript中不是那么有文化.此外,jQuery的ScrollTo plugin太复杂了.我愿意使用一个有很多选项的插件,但我只是不希望这些选项阻止我弄清楚如何设置它.
任何帮助将非常感激！
解决方法
这是我发现它的最好方法 – 它只使用普通的锚点,但扩展了它们的功能
$('a').click(function() {
var elementClicked = $(this).attr("href");
var destination = $(elementClicked).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-15},500);
});
这是一个live example
