单击锚点链接时平滑滚动

我的网页上有几个超链接。 用户在访问我的帮助部分时会阅读的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 });