blocks|key|874404|text|下面是我用来将jQuery+scrollTo快速绑定到所有锚链接的代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|874405|//+Smooth+scroll
$('a[href*=#]').click(function+()+{
++++var+hash+=+$(this).attr('href');
++++hash+=+hash.slice(hash.indexOf('#')+%2B+1);
++++$.scrollTo(hash+==+'top'+?+0+:+'a[name='%2Bhash%2B']',+500);
++++window.location.hash+=+'#'+%2B+hash;
++++return+false;
});|code-block|syntax|javascript|874406|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here's the code I used to quickly bind jQuery scrollTo to all anchor links:

<pre><code>// 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;
});
</code></pre>

blocks|key|1089096|text|我是这样做的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1089097|++++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;
++++++++}
++++});|code-block|syntax|javascript|1089098|然后你只需要像这样创建你的锚点：|1089099|<a+class="scroll"+href="#destination1">Destination+1</a>|1089100|你可以在我的website上看到。|offset|length|1089101|这里还提供了一个演示：http://jsfiddle.net/YtJcL/|1089102|entityMap|0|LINK|mutability|MUTABLE|url|http://hanoo.org/|1|http://jsfiddle.net/YtJcL/^0|0|0|0|0|6|7|0|0|B|Q|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@]|9|@$M|15|N|16|1|17]]|A|$]]|$1|O|3|P|5|6|7|18|8|@]|9|@$M|19|N|1A|1|1B]]|A|$]]|$1|Q|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]]]

Here is how I do it:

<pre><code> 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 &gt; $(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;
 }
 });
</code></pre>

Then you just need to create your anchor like this:

<pre><code>&lt;a class="scroll" href="#destination1"&gt;Destination 1&lt;/a&gt;
</code></pre>

You can see it on my <a href="http://hanoo.org">website</a>. 
A demo is also available here: <a href="http://jsfiddle.net/YtJcL/">http://jsfiddle.net/YtJcL/</a>

blocks|key|1089136|text|到目前为止我见过的最好的解决方案：jQuery:+Smooth+Scrolling+Internal+Anchor+Links|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1089137|HTML：|1089138|<a+href="#comments"+class="scroll">Scroll+to+comments</a>|code-block|syntax|javascript|1089139|脚本：|1089140|jQuery(document).ready(function($)+{
++++$(".scroll").click(function(event){+++++
++++++++event.preventDefault();
++++++++$('html,body').animate({scrollTop:$(this.hash).offset().top},+500);
++++});
});|1089141|entityMap|0|LINK|mutability|MUTABLE|url|http://www.sycha.com/jquery-smooth-scrolling-internal-anchor-links^0|H|1A|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

Best solution I have seen so far:
<a href="http://www.sycha.com/jquery-smooth-scrolling-internal-anchor-links">jQuery: Smooth Scrolling Internal Anchor Links</a>

HTML:

<pre><code>&lt;a href="#comments" class="scroll"&gt;Scroll to comments&lt;/a&gt;
</code></pre>

Script:

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

blocks|key|874556|text|我使用hanoo's+script创建了一个jQuery函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|874557|$.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;
};|code-block|syntax|javascript|874558|用法：|874559|$('#myelement').scrollIntoView();|874560|持续时间和缓动的默认值是400ms和"swing“。|874561|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/12714767/65387^0|3|E|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

Using <a href="https://stackoverflow.com/a/12714767/65387">hanoo's script</a> I created a jQuery function:

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

usage:

<pre><code>$('#myelement').scrollIntoView();
</code></pre>

Defaults for duration and easing are 400ms and "swing".

blocks|key|874573|text|作品|type|unstyled|depth|inlineStyleRanges|entityRanges|data|874574|$('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="'+%2B+hashname+%2B+'"],+#'+%2B+hashname),
++++++++++++++++targetOffset+=+target.offset().top;
++++++++++++if(targetOffset+>=+1)+{
++++++++++++++++$('html,+body').animate({+scrollTop:+targetOffset-60+},+300);
++++++++++++}
++++++++}
++++});
});|code-block|syntax|javascript|874575|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

works

<pre><code>$('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 &gt;= 1) {
 $('html, body').animate({ scrollTop: targetOffset-60 }, 300);
 }
 }
 });
});
</code></pre>

blocks|key|1089240|text|试试这个吧。这是我修改过的CSS技巧中的代码，它非常简单，可以进行水平和垂直滚动。需要JQuery。这是一个demo|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1089241|$(function()+{
++$('a[href*=#]:not([href=#])').click(function()+{
++++if+(location.pathname.replace(/%5E\//,'')+==+this.pathname.replace(/%5E\//,'')+&&+location.hostname+==+this.hostname)+{
++++++var+target+=+$(this.hash);
++++++target+=+target.length+?+target+:+$('[name='+%2B+this.hash.slice(1)+%2B']');
++++++if+(target.length)+{
++++++++$('html,body').animate({
++++++++++scrollTop:+target.offset().top-10,+scrollLeft:target.offset().left-10
++++++++},+1000);
++++++++return+false;
++++++}
++++}
++});
});|code-block|syntax|javascript|1089242|entityMap|0|LINK|mutability|MUTABLE|url|http://plnkr.co/edit/jdVlxGi16Bq7TToV0oMJ?p=preview^0|1I|4|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Try this one. It is a code from CSS tricks that I modified, it is pretty straight forward and does both horizontal and vertial scrolling. Needs JQuery. Here is a <a href="http://plnkr.co/edit/jdVlxGi16Bq7TToV0oMJ?p=preview" rel="nofollow">demo</a>

<pre><code>$(function() {
 $('a[href*=#]:not([href=#])').click(function() {
 if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') &amp;&amp; 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;
 }
 }
 });
});
</code></pre>

blocks|key|874622|text|我想要一个适用于<a+href="#my-id">和<a+href="/page#my-id">的版本|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|874623|<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>|code-block|syntax|javascript|874624|entityMap^0|8|H|Q|M|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

I wanted a version that worked for <code>&lt;a href="#my-id"&gt;</code> and <code>&lt;a href="/page#my-id"&gt;</code>

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

Is there a way to scroll down to an anchor link using jQuery?

Like: 

<pre><code>$(document).ready(function(){
 $("#gotomyanchor").click(function(){
 $.scrollSmoothTo($("#myanchor"));
 });
});
</code></pre>

?

jquery smooth scroll to an anchor?

jQuery

有没有办法使用jQuery向下滚动到锚链？像这样：$(document).ready(function(){  $("#gotomyanchor").click(function(){      $.scrollSmoothTo($("#myanchor"));  });});

问jquery平滑滚动到锚点？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery平滑滚动到锚点？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery平滑滚动到锚点？
EN