blocks|key|103678|text|为此，您可以为动画命令设置一个回调函数，该函数将在滚动动画完成后执行。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|103679|例如：|103680|var+body+=+$("html,+body");
body.stop().animate({scrollTop:0},+500,+'swing',+function()+{+
+++alert("Finished+animating");
});|code-block|syntax|javascript|103681|在警告代码所在的位置，您可以执行更多的javascript来添加更多的动画。|103682|此外，“摇摆”也是用来设定放松的。有关更多信息，请查看http://api.jquery.com/animate/。|offset|length|103683|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/animate/^0|0|0|0|0|R|U|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

To do this, you can set a callback function for the animate command which will execute after the scroll animation has finished.

For example:

<pre><code>var body = $("html, body");
body.stop().animate({scrollTop:0}, 500, 'swing', function() { 
 alert("Finished animating");
});
</code></pre>

Where that alert code is, you can execute more javascript to add in further animation.

Also, the 'swing' is there to set the easing. Check out <a href="http://api.jquery.com/animate/" rel="noreferrer">http://api.jquery.com/animate/</a> for more info.

blocks|key|320678|text|尝试以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|320679|$('.Classname').click(function(){
+++ $("html,+body").animate({+scrollTop:+0+},+600);
+++ return+false;
});|code-block|syntax|javascript|320680|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|$]]

Try this code:

<pre><code>$('.Classname').click(function(){
  $("html, body").animate({ scrollTop: 0 }, 600);
  return false;
});
</code></pre>

blocks|key|103793|text|使用以下命令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|103794|$('a[href%5E="#"]').on('click',+function(event)+{

++++var+target+=+$(+$(this).attr('href')+);

++++if(+target.length+)+{
++++++++event.preventDefault();
++++++++$('html,+body').animate({
++++++++++++scrollTop:+target.offset().top
++++++++},+500);
++++}

});|code-block|syntax|javascript|103795|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|$]]

Use this: 

<pre><code>$('a[href^="#"]').on('click', function(event) {

 var target = $( $(this).attr('href') );

 if( target.length ) {
 event.preventDefault();
 $('html, body').animate({
 scrollTop: target.offset().top
 }, 500);
 }

});
</code></pre>

blocks|key|103710|text|为此，您可以使用回调方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|103711|body.animate({
++++++scrollTop:0
++++},+500,+
++++function(){}+//+callback+method+use+this+space+how+you+like
);|code-block|syntax|javascript|103712|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|$]]

for this you can use callback method

<pre><code>body.animate({
 scrollTop:0
 }, 500, 
 function(){} // callback method use this space how you like
);
</code></pre>

blocks|key|320666|text|试着这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|320667|var+body+=+$("body,+html");
var+top+=+body.scrollTop()+//+Get+position+of+the+body
if(top!=0)
{
+++++++body.animate({scrollTop+:0},+500,function(){
+++++++++//DO+SOMETHING+AFTER+SCROLL+ANIMATION+COMPLETED
++++++++++alert('Hello');
++++++});
}|code-block|syntax|javascript|320668|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|$]]

Try this instead:

<pre><code>var body = $("body, html");
var top = body.scrollTop() // Get position of the body
if(top!=0)
{
 body.animate({scrollTop :0}, 500,function(){
 //DO SOMETHING AFTER SCROLL ANIMATION COMPLETED
 alert('Hello');
 });
}
</code></pre>

blocks|key|103938|text|简单的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|103939|按ID或名称滚动到任意元素：|103940|SmoothScrollTo("#elementId",+1000);|code-block|syntax|javascript|103941|代码：|103942|function+SmoothScrollTo(id_or_Name,+timelength){
++++var+timelength+=+timelength+%7C%7C+1000;
++++$('html,+body').animate({
++++++++scrollTop:+$(id_or_Name).offset().top-70
++++},+timelength,+function(){
++++++++window.location.hash+=+id_or_Name;
++++});
}|103943|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<h1>Simple solution:</h1>

scrolling to any element by ID or NAME:

<pre><code>SmoothScrollTo("#elementId", 1000);
</code></pre>

code:

<pre><code>function SmoothScrollTo(id_or_Name, timelength){
 var timelength = timelength || 1000;
 $('html, body').animate({
 scrollTop: $(id_or_Name).offset().top-70
 }, timelength, function(){
 window.location.hash = id_or_Name;
 });
}
</code></pre>

blocks|key|103827|text|使用单击函数()编写代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|103828|++++var+body+=+$('html,+body');

++++$('.toTop').click(function(e){
++++++++e.preventDefault();
++++++++body.animate({scrollTop:0},+500,+'swing');

});+|code-block|syntax|javascript|103829|.toTop+=所单击元素的类，可以是img或a|offset|length|style|CODE|103830|entityMap^0|0|0|0|6|J|3|N|1|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]|$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|N|$]]

Code with click function()

<pre><code> var body = $('html, body');

 $('.toTop').click(function(e){
 e.preventDefault();
 body.animate({scrollTop:0}, 500, 'swing');

}); 
</code></pre>

<code>.toTop</code> = class of clicked element maybe <code>img</code> or <code>a</code>

blocks|key|103839|text|jQuery("html,body").animate({scrollTop:+jQuery("#your-elemm-id-where+you+want+to+scroll").offset().top-<some-number>},+500,+'swing',+function()+{+
+++++++alert("Finished+animating");
++++});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|103840|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>jQuery("html,body").animate({scrollTop: jQuery("#your-elemm-id-where you want to scroll").offset().top-&lt;some-number&gt;}, 500, 'swing', function() { 
 alert("Finished animating");
 });
</code></pre>

blocks|key|320915|text|你既可以使用CSS类也可以使用HTML+id，为了保持对称，我总是使用CSS类，例如|type|unstyled|depth|inlineStyleRanges|entityRanges|data|320916|<a+class="btn+btn-full+js--scroll-to-plans"+href="#">I’m+hungry</a>+
%7C
%7C
%7C
<section+class="section-plans+js--section-plans+clearfix">|code-block|syntax|javascript|320917|$(document).ready(function+()+{
++++$('.js--scroll-to-plans').click(function+()+{
++++++++$('body,html').animate({
++++++++++++scrollTop:+$('.js--section-plans').offset().top
++++++++},+1000);
++++++++return+false;})
});|320918|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

you can use both CSS class or HTML id, for keeping it symmetric I always use CSS class for example
<pre><code>&lt;a class=&quot;btn btn-full js--scroll-to-plans&quot; href=&quot;#&quot;&gt;I’m hungry&lt;/a&gt; 
|
|
|
&lt;section class=&quot;section-plans js--section-plans clearfix&quot;&gt;

</code></pre>
<pre><code>$(document).ready(function () {
 $('.js--scroll-to-plans').click(function () {
 $('body,html').animate({
 scrollTop: $('.js--section-plans').offset().top
 }, 1000);
 return false;})
});
</code></pre>

blocks|key|103968|text|$("body").stop().animate({
++++++++scrollTop:+0
++++},+500,+'swing',+function+()+{
++++++++console.log(confirm('Like+This'))
++++}
);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|103969|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$("body").stop().animate({
 scrollTop: 0
 }, 500, 'swing', function () {
 console.log(confirm('Like This'))
 }
);
</code></pre>

blocks|key|320940|text|大家好，我正面临着一个类似的问题，这对我来说很好：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|320941|jQuery(document).on('click',+'element',+function()+{
++let+posTop+=+jQuery(target).offset().top;
++console.log(posTop);
++$('html,+body').animate({scrollTop:+posTop},+1,+function()+{
++++posTop+=+jQuery(target).offset().top;

++++$('html,+body').animate({scrollTop:+posTop},+'slow');
++});
});|code-block|syntax|javascript|320942|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|$]]

Hello everyone I was facing a similar issue and this worked fine for me:
<pre><code>jQuery(document).on('click', 'element', function() {
 let posTop = jQuery(target).offset().top;
 console.log(posTop);
 $('html, body').animate({scrollTop: posTop}, 1, function() {
 posTop = jQuery(target).offset().top;

 $('html, body').animate({scrollTop: posTop}, 'slow');
 });
});
</code></pre>

I set the page to scroll to top when a button is clicked. But first I used an if statement to see if the top of the page was not set to 0. Then if it's not 0 I animate the page to scroll to the top.

<pre><code>var body = $("body");
var top = body.scrollTop() // Get position of the body

if(top!=0)
{
 body.animate({scrollTop:0}, '500');
}
</code></pre>

The tricky part now is animating something AFTER the page has scrolled to the top. So my next thought is, find out what the page position is. So I used console log to find out.

<pre><code>console.log(top); // the result was 365
</code></pre>

This gave me a result of 365, I'm guessing that is the position number I was at just before scrolling to the top.

My question is how do I set the position to be 0, so that I can add another animation that runs once the page is at 0?

Thanks!

jQuery .scrollTop(); + animation

jQuery

我将页面设置为单击按钮时滚动到顶部。但首先，我使用了一条if语句来查看页面的顶部是否没有设置为0。如果不是0，我会让页面滚动到顶部。var body = $("body");var top = body.scrollTop() // Get position of the bodyif(top!=0){  body.animate({scrollTop:0}, '500');}现在棘手的部分是在页

问jQuery .scrollTop()；+动画
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery .scrollTop()；+动画EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery .scrollTop()；+动画
EN