使用最小标记和哈希标记简单地“滚动到/向下”效果
我正在制作一个单页网站，顶部有经典导航。 现在我将链接设置为哈希标记，以便在页面中导航：
... ... 显然，这是有效的，但跳转到约部分是即时的，而不是渐进的。 我正在寻找一个非常简单的实现，以便逐步过渡。 我不想要任何幻想。 没有轴，偏移或任何其他选项。 我只是希望滚动过渡是渐进的。 我想要的唯一设置是完成滚动所需的时间。 另外，我想对我的标记几乎没有任何更改。 我见过几个javascript插件，要求你使用锚标签来设置html文档中的位置 – 我不希望这样。 这个网站看起来很有前景，但我不知道如何设置它。 没有演示，所以我看不到如何设置它。 我在Javascript中不是那么有文化。 此外，jQuery的ScrollTo插件太复杂了。 我愿意使用一个有很多选项的插件，但我只是不希望这些选项阻止我弄清楚如何设置它。
任何帮助将非常感激！
这是我发现的最佳方式 – 它只使用普通的锚点，但扩展了它们的function
$('a').click(function() { var elementClicked = $(this).attr("href"); var destination = $(elementClicked).offset().top; $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-https://stackoverflow.com/questions/10403513/simple-scroll-to-down-effect-using-minimal-markup-and-hash-tags/15}, 500); });
这是一个实例
我使用直接jquery来做到这一点。
我有一个像这样的链接 – >
Go to https://stackoverflow.com/questions/10403513/simple-scroll-to-down-effect-using-minimal-markup-and-hash-tags/1
然后使用jquery它会向下滚动到另一个id为“https://stackoverflow.com/questions/10403513/simple-scroll-to-down-effect-using-minimal-markup-and-hash-tags/1”的锚点
$("a.scrolling").click(function(e) { e.preventDefault(); goToByScroll($(this).attr("href")); }); function goToByScroll(id) { $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow'); }
在Javascript中有ScrollTo。 这是一个窗口事件。 在这里查看： https ： //developer.mozilla.org/en/DOM/window.scrollTo
我在网上找到了这个代码，同时搜索创建此滚动效果的快速方法。
HTML代码：
Jump to services
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; }); });
}）;
这是代码源 。