【问题标题】：jQuery .scrollTop(); + animationjQuery .scrollTop(); +动画
【发布时间】：2013-05-04 17:18:38
【问题描述】：

我将页面设置为在单击按钮时滚动到顶部。但首先我使用 if 语句来查看页面顶部是否未设置为 0。如果不是 0，我将动画页面设置为滚动到顶部。

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

if(top!=0)
{
  body.animate({scrollTop:0}, '500');
}

现在棘手的部分是在页面滚动到顶部之后为某些内容设置动画。所以我的下一个想法是，找出页面位置是什么。所以我使用控制台日志来查找。

console.log(top);  // the result was 365

这给了我 365 的结果，我猜这是我在滚动到顶部之前的位置编号。

我的问题是如何将位置设置为 0，以便我可以添加另一个在页面为 0 时运行的动画？

谢谢！

【问题讨论】：

需要你触发事件的那些按钮总是可见的吗？如果没有，那么我有一个不需要任何条件的代码，可以轻松满足您的第一个条件
毫秒周围不应有引号。文档所指的“字符串”是慢/快

标签： jquery jquery-animate scrolltop

【解决方案1】：

为此，您可以为动画命令设置一个回调函数，该函数将在滚动动画完成后执行。

例如：

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

警报代码在哪里，您可以执行更多 javascript 以添加更多动画。

另外，'swing' 是用来设置缓动的。查看http://api.jquery.com/animate/ 了解更多信息。

【讨论】：

谢谢托马斯，这正是我所需要的。我还添加了延迟，因为课程添加得太快了。 if(top!=0) { console.log("隐藏滚动"); body.animate({scrollTop:0}, '500', 'swing', function() { console.log("完成动画"); leftitems.delay(1000).removeClass("slide"); }); }
我不确定是不是因为这篇文章已经有 4 年历史了，但我认为在较新版本的 jQuery 中，您需要在时间周围删除那些单引号：body.animate({scrollTop:0 }, 500, 'swing', function() { alert("完成动画"); });
顺便说一下，您的回调将执行两次，因为您选择了两个元素。
Thomas 在添加正文和 html 方面做得很好。案例一、Chrome阅读正文和滚动，火狐需要html来做。
刚刚试过——$('html') 在 Chrome 中不起作用，$('body') 在 Firefox 中不起作用，所以需要 $('html, body')。而且调用 .stop() 也是一件好事——我尝试在 chrome 中快速调用 animate 几次，之后我无法向下滚动页面。

【解决方案2】：

试试这个代码：

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

【讨论】：

$("html") 应改为使用，因为在您的情况下，如果您添加回调函数，它将被调用两次，一次用于 html，一次用于 body。而使用 body 什么都不做。
似乎取决于浏览器。在某些情况下，$('html') 可能什么都不做，因此您需要同时使用两者，并注意两次触发的回调。

【解决方案3】：

使用这个：

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

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

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

});

【讨论】：

【解决方案4】：

为此你可以使用回调方法

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

【讨论】：

【解决方案5】：

试试这个：

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');
      });
}

【讨论】：

【解决方案6】：

简单的解决方案：

按 ID 或名称滚动到任何元素：

SmoothScrollTo("#elementId", 1000);

代码：

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;
    });
}

【讨论】：

'timelength' 已经作为参数传入，因此无需使用 'var' 声明它。无法对这个答案进行“编辑”，因为它少于 6 个字符！ ;-) +1
@AnthonyWalsh 没办法。 var 不需要覆盖全局变量（如果存在具有该名称的全局变量）
很公平 ;-) 我正在使用 TypeScript 并直接传入一个数字作为 timelength 的参数，因此在我的情况下是所有本地范围。干杯！

【解决方案7】：

带有点击函数()的代码

    var body = $('html, body');

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

});

.toTop = 点击元素的类可能是img 或a

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

您可以同时使用 CSS 类或 HTML id，为了保持对称，例如我总是使用 CSS 类

<a class="btn btn-full js--scroll-to-plans" href="#">I’m hungry</a> 
|
|
|
<section class="section-plans js--section-plans clearfix">

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

【讨论】：

【解决方案10】：

你必须看到这个

$(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;
                }
            }
        });
    });

或尝试一下

$(function () {$('a').click(function () {
$('body,html').animate({
    scrollTop: 0
}, 600);
return false;});});

【讨论】：

【解决方案11】：

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

【讨论】：

【解决方案12】：

大家好，我遇到了类似的问题，这对我来说很好：

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');
  });
});

【讨论】：