jQuery .scrollTop(); +动画


171

单击按钮时,我将页面设置为滚动到顶部。但是首先,我使用了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时运行的另一个动画?

谢谢!


1
是否需要始终在其上触发事件的那些按钮可见?如果不是的话,那么我有一个不需要任何条件的代码,可以很容易地为您的第一个条件做准备

1
毫秒之间不应包含引号。文档所指的“字符串”是慢速/快速
mplungjan

Answers:


313

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

例如:

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

在该警报代码所在的位置,您可以执行更多的JavaScript来添加更多动画。

此外,“波动”在那里设定宽松政策。请访问http://api.jquery.com/animate/了解更多信息。


1
谢谢托马斯,这就是我所需要的。我还添加了一个延迟,因为该类添加得太快了。if(top!= 0){console.log(“隐藏的滚动”); body.animate({scrollTop:0},'500','swing',function(){console.log(“动画完成”); leftitems.delay(1000).removeClass(“ slide”);}); }
Juan Di Diego

5
我不确定这是否是因为该文章已有4年历史了,但是我认为在jQuery的较新版本中,您需要删除以下时间的单引号:body.animate({scrollTop:0},500,'swing', function(){alert(“动画完成”);});
安德鲁

27
顺便说一句,您的回调将执行两次,因为您选择了两个元素。
Big McLargeHuge 2014年

8
托马斯(Thomas)很好地添加了body和html。情况1。Chrome阅读器主体和滚动式显示器,FIrefox需要html来完成。
fearis 2015年

4
刚刚尝试过-$('html')在Chrome中不起作用,$('body')在Firefox中不起作用,因此需要$('html,body')。而且,调用.stop()也是一件好事–我尝试在chrome中快速调用animate几次,之后便无法向下滚动页面。
列夫·卢科姆斯基

54

试试这个代码:

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

8
$("html")应该改用它,因为在您的情况下,如果添加一个回调函数,它将被调用两次,一次是html,一次是body。使用身体什么也没有做。
瑕疵的

10
似乎取决于浏览器。在某些情况下,$('html')可能什么也不做,因此您需要同时使用它们,并注意两次触发的回调。
commonpike 2014年

31

用这个:

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

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

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

});

8

为此,您可以使用回调方法

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

7

尝试以下方法:

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

5

简单的解决方案:

按ID或NAME滚动到任何元素:

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需要不覆盖全局变量(如果存在具有该名称的全局变量)
T.Todua

足够公平;-)我正在使用TypeScript并直接将数字作为时间长度的参数传递,因此所有本地作用域都属于我。干杯!
Anthony Walsh

4

点击功能的代码()

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

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

}); 

.toTop=单击元素的类别可能是imga


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

0

你必须看到这个

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

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

0

您可以同时使用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;})
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.