jQuery的平滑滚动到锚?

有没有办法使用jQuery向下滚动到锚链接?

喜欢:

$(document).ready(function(){ $("#gotomyanchor").click(function(){ $.scrollSmoothTo($("#myanchor")); }); }); 

下面是我如何做到这一点:

  var hashTagActive = ""; $(".scroll").on("click touchstart" , function (event) { if(hashTagActive != this.hash) { //this will prevent if the user click several times the same link to freeze the scroll. event.preventDefault(); //calculate destination place var dest = 0; if ($(this.hash).offset().top > $(document).height() - $(window).height()) { dest = $(document).height() - $(window).height(); } else { dest = $(this.hash).offset().top; } //go to destination $('html,body').animate({ scrollTop: dest }, 2000, 'swing'); hashTagActive = this.hash; } }); 

那么你只需要像这样创build你的锚点:

 <a class="scroll" href="#destination1">Destination 1</a> 

你可以在我的网站上看到它。
演示也可在这里: http : //jsfiddle.net/YtJcL/

我将使用CSS-Tricks.com中的简单代码片段:

 $(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/

目前为止我看到的最佳解决scheme: jQuery:平滑滚动内部锚链接

HTML:

 <a href="#comments" class="scroll">Scroll to comments</a> 

脚本:

 jQuery(document).ready(function($) { $(".scroll").click(function(event){ event.preventDefault(); $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500); }); }); 

jQuery.scrollTo将做你想要的一切和更多!

你可以传递各种不同的东西:

  • 一个原始数字
  • 一个string('44','100px','+ = 30px'等)
  • DOM元素(逻辑上,可滚动元素的子元素)
  • select器,将相对于可滚动元素
  • string“max”滚动到结尾。
  • 一个指定百分比的string,滚动到容器的那一部分(fe:50%到*中间)。
  • 散列{top:x,left:y},x和y可以是任何types的数字/string,如上所述。

这里是我用来快速绑定jQuery scrollTo到所有锚链接的代码:

 // Smooth scroll $('a[href*=#]').click(function () { var hash = $(this).attr('href'); hash = hash.slice(hash.indexOf('#') + 1); $.scrollTo(hash == 'top' ? 0 : 'a[name='+hash+']', 500); window.location.hash = '#' + hash; return false; }); 

我想要一个适用于<a href="#my-id"><a href="/page#my-id">

 <script> $('a[href*=#]:not([href=#])').on('click', function (event) { event.preventDefault(); var element = $(this.hash); $('html,body').animate({ scrollTop: element.offset().top },'normal', 'swing'); }); </script> 

试试这个。 这是从我修改的CSS技巧的代码,它是非常简单的,并进行水平和垂直滚动。 需要JQuery。 这里是一个演示

 $(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-10, scrollLeft:target.offset().left-10 }, 1000); return false; } } }); }); 

使用hanoo的脚本,我创build了一个jQuery函数:

 $.fn.scrollIntoView = function(duration, easing) { var dest = 0; if (this.offset().top > $(document).height() - $(window).height()) { dest = $(document).height() - $(window).height(); } else { dest = this.offset().top; } $('html,body').animate({ scrollTop: dest }, duration, easing); return this; }; 

用法:

 $('#myelement').scrollIntoView(); 

持续时间和宽松的默认值是400ms和“摆动”。

我在我的网站使用这个:

 $(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 }, 1200, 'swing', function () { window.location.hash = target; }); }); 

});

你可以改变滚动的速度改变默认使用的“1200”,它在大多数浏览器上工作得很好。

将代码放在页面的<head> </head>标记之后,您需要在<body>标记中创build内部链接:

 <a href="#home">Go to Home</a> 

希望它有帮助!

Ps:别忘了打电话:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

我使用的插件Smooth Scroll ,在http://plugins.jquery.com/smooth-scroll/ 。 有了这个插件,你需要包括一个链接到jQuery和插件代码:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="javascript/smoothscroll.js"></script> 

(链接需要让smoothScroll类工作)。

平滑滚动的另一个function是,匿名名称不显示在URL中!

作品

 $('a[href*=#]').each(function () { $(this).attr('href', $(this).attr('href').replace('#', '#_')); $(this).on( "click", function() { var hashname = $(this).attr('href').replace('#_', ''); if($(this).attr('href') == "#_") { $('html, body').animate({ scrollTop: 0 }, 300); } else { var target = $('a[name="' + hashname + '"], #' + hashname), targetOffset = target.offset().top; if(targetOffset >= 1) { $('html, body').animate({ scrollTop: targetOffset-60 }, 300); } } }); }); 

我讨厌添加函数命名的类到我的代码,所以我把它放在一起。 如果我停止使用平滑滚动,我觉得有必要通过我的代码,并删除所有类=“滚动”的东西。 使用这种技术,我可以注释掉5行JS,并且整个站点都会更新。 🙂

 <a href="/about">Smooth</a><!-- will never trigger the function --> <a href="#contact">Smooth</a><!-- but he will --> ... ... <div id="contact">...</div> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> // Smooth scrolling to element IDs $('a[href^=#]:not([href=#])').on('click', function () { var element = $($(this).attr('href')); $('html,body').animate({ scrollTop: element.offset().top },'normal', 'swing'); return false; }); </script> 

要求
1. <a>元素必须具有以#开始的href属性,并且不仅仅是#
2.页面上具有匹配的id属性的元素

它能做什么:
1.该函数使用href值创buildanchorID对象
– 在这个例子中,它是$('#contact')/about/
2. HTMLBODY被animation到anchorID的顶部偏移量
– 速度=“正常”(“快”,“慢”,毫秒)
– easing ='swing'('linear'等等… google easing)
3. return false – 它阻止浏览器在URL中显示哈希
– 脚本没有它,但它不是“ 光滑的 ”。