单击锚点链接时平滑滚动
我的网页上有几个超链接。 用户在访问我的帮助部分时会阅读的FAQ。
使用锚链接，我可以使页面向锚点滚动，并引导用户在那里。
有没有办法使滚动顺利？
但请注意他正在使用自定义的JavaScript库。 也许jQuery提供这样的东西烤出来？
$(document).on('click', 'a[href^="#"]', function (event) { event.preventDefault(); $('html, body').animate({ scrollTop: $($.attr(this, 'href')).offset().top }, 500); }); 这里是小提琴： http : //jsfiddle.net/9SDLw/
如果您的目标元素没有ID，并且按照其name链接到它，请使用以下命令：
$('a[href^="#"]').click(function () { $('html, body').animate({ scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top }, 500); return false; });
为了提高性能，您应该caching$('html, body')select器，以便每次单击锚时都不会运行该select器：
var $root = $('html, body'); $('a[href^="#"]').click(function () { $root.animate({ scrollTop: $( $.attr(this, 'href') ).offset().top }, 500); return false; });
如果要更新URL，请在animatecallback中执行此操作：
var $root = $('html, body'); $('a[href^="#"]').click(function() { var href = $.attr(this, 'href'); $root.animate({ scrollTop: $(href).offset().top }, 500, function () { window.location.hash = href; }); return false; });
正确的语法是：
//Smooth scrolling with links $('a[href*=\\#]').on('click', function(event){ event.preventDefault(); $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500); }); // Smooth scrolling when the document is loaded and ready $(document).ready(function(){ $('html,body').animate({scrollTop:$(location.hash).offset().top}, 500); });
简化 ：干
function smoothScrollingTo(target){ $('html,body').animate({scrollTop:$(target).offset().top}, 500); } $('a[href*=\\#]').on('click', function(event){ event.preventDefault(); smoothScrollingTo(this.hash); }); $(document).ready(function(){ smoothScrollingTo(location.hash); });
href*=\\# ：
-
*表示它匹配包含#字符的内容。 因此只匹配锚 。 更多关于这个的含义，请看这里 -
\\是因为#是CSSselect器中的特殊字符，所以我们必须将其转义。
$('a[href*=#]').click(function(event){ $('html, body').animate({ scrollTop: $( $.attr(this, 'href') ).offset().top }, 500); event.preventDefault(); });
这对我来说是完美的
我build议你做这个通用的代码：
$('a[href^="#"]').click(function(){ var the_id = $(this).attr("href"); $('html, body').animate({ scrollTop:$(the_id).offset().top }, 'slow'); return false;});
你可以在这里看到一篇很好的文章： jQuery-effet-smooth-scroll-defilement-fluide
$(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); });
官方： http : //css-tricks.com/snippets/jquery/smooth-scrolling/
使用JQuery：
$('a[href*=#]').click(function(){ $('html, body').animate({ scrollTop: $( $.attr(this, 'href') ).offset().top }, 500); return false; });
添加这个：
function () { window.location.hash = href; }
是以某种方式取消垂直偏移
top - 72
在Firefox和IE中，不在Chrome中。 基本上，页面平滑地滚动到基于偏移应该停止的点，但是然后跳转到页面没有偏移的地方。
它确实将哈希值添加到了url的末尾，但是按回不会将您带回到顶部，它只是从url中移除哈希值，并将查看窗口留在所在的位置。
这里是我正在使用的完整的js：
var $root = $('html, body'); $('a').click(function() { var href = $.attr(this, 'href'); $root.animate({ scrollTop: $(href).offset().top - 120 }, 500, function () { window.location.hash = href; }); return false; });
这个解决scheme也可以用于下面的URL，而不会破坏到不同页面的锚链接。
http://www.example.com/dir/index.html http://www.example.com/dir/index.html#anchor ./index.html ./index.html#anchor
等等
var $root = $('html, body'); $('a').on('click', function(event){ var hash = this.hash; // Is the anchor on the same page? if (hash && this.href.slice(0, -hash.length-1) == location.href.slice(0, -location.hash.length-1)) { $root.animate({ scrollTop: $(hash).offset().top }, 'normal', function() { location.hash = hash; }); return false; } });
我还没有在所有浏览器中testing过。
这样可以很容易的让jQuery识别你的目标hash，并知道何时何地停止。
$('a[href*="#"]').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; }); });
给出的答案有效，但禁用传出链接。 下面的版本有一个额外的奖金缓解（摆动），并尊重传出的链接。
$(document).ready(function () { $('a[href^="#"]').on('click', function (e) { e.preventDefault(); var target = this.hash; var $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().top }, 900, 'swing', function () { window.location.hash = target; }); }); });
HTML
<a href="#target" class="smooth-scroll"> Link </a> <div id="target"></div>
或使用绝对完整url
<a href="https://somewebsite.com/#target" class="smooth-scroll"> Link </a> <div id="target"></div>
jQuery的
$j(function() { $j('a.smooth-scroll').click(function() { if ( window.location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && window.location.hostname == this.hostname ) { var target = $j(this.hash); target = target.length ? target : $j('[name=' + this.hash.slice(1) + ']'); if (target.length) { $j('html,body').animate({ scrollTop: target.offset().top - 70 }, 1000); return false; } } }); });
我为“/ xxxxx＃asdf”和“#asdf”href锚都做了这个
$("a[href*=#]").on('click', function(event){ var href = $(this).attr("href"); if ( /(#.*)/.test(href) ){ var hash = href.match(/(#.*)/)[0]; var path = href.match(/([^#]*)/)[0]; if (window.location.pathname == path || path.length == 0){ event.preventDefault(); $('html,body').animate({scrollTop:$(this.hash).offset().top}, 1000); window.location.hash = hash; } } });
这里是我为多个链接和定位器实现的解决scheme，用于平滑滚动：
http://www.adriantomic.se/development/jquery-localscroll-tutorial/如果你在导航div中设置了导航链接并用这个结构声明：;
<a href = "#destinationA">
和你的相应的锚标签目的地如此：
<a id = "destinationA">
然后把这个加载到文档的头部：
<!-- Load jQuery --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <!-- Load ScrollTo --> <script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script> <!-- Load LocalScroll --> <script src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script> <script type = "text/javascript"> $(document).ready(function() { // Scroll the whole document $('#menuBox').localScroll({ target:'#content' }); }); </script>
感谢@Adriantomic
如果你有一个简单的button在页面上向下滚动到一个div，并希望后退button工作跳转到顶部，只需添加以下代码：
$(window).on('hashchange', function(event) { if (event.target.location.hash=="") { window.scrollTo(0,0); } });
这可以扩展到跳转到不同的divs，通过阅读散列值，滚动像约瑟夫·西尔伯斯回答。
永远不要忘记offset（）函数正在给你的元素的位置文件。 所以当你需要滚动你的元素相对于它的父母，你应该使用这个;
$('.a-parent-div').find('a').click(function(event){ event.preventDefault(); $('.scroll-div').animate({ scrollTop: $( $.attr(this, 'href') ).position().top + $('.scroll-div').scrollTop() }, 500); });
关键是获取滚动div的scrollTop，并将其添加到scrollTop。 如果你不这样做（）函数总是给你不同的位置值。
$("a").on("click", function(event){ //check the value of this.hash if(this.hash !== ""){ event.preventDefault(); $("html, body").animate({scrollTop:$(this.hash).offset().top}, 500); //add hash to the current scroll position window.location.hash = this.hash; } });
经过testing和validation的代码
<script> jQuery(document).ready(function(){ // Add smooth scrolling to all links jQuery("a").on('click', function(event) { // Make sure this.hash has a value before overriding default behavior if (this.hash !== "") { // Prevent default anchor click behavior event.preventDefault(); // Store hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area jQuery('html, body').animate({ scrollTop: jQuery(hash).offset().top }, 800, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); } // End if }); }); </script>
现代浏览器这些天快一点。 setInterval可能工作。 这个function在Chrome和Firefox这些日子里效果很好（Safari浏览器有点慢，没有用IE浏览器）
function smoothScroll(event) { if (event.target.hash !== '') { //Check if tag is an anchor event.preventDefault() const hash = event.target.hash.replace("#", "") const link = document.getElementsByName(hash) //Find the where you want to scroll const position = link[0].getBoundingClientRect().y let top = 0 let smooth = setInterval(() => { let leftover = position - top if (top === position) { clearInterval(smooth) } else if(position > top && leftover < 10) { top += leftover window.scrollTo(0, top) } else if(position > (top - 10)) { top += 10 window.scrollTo(0, top) } }, 6)//6 milliseconds is the faster chrome runs setInterval } }
jQuery是最好的！
$('a').click(function(){ //code here });
