jQuery.scrollTop(); + анимация

Я установил страницу для прокрутки вверх при нажатии кнопки. Но сначала я использовал оператор 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 scrolltop jquery-animate
person Juan Di Diego    schedule 10.05.2013    source источник
comment
нужно, чтобы те кнопки, на которые вы запускаете событие, всегда были видны? Если нет, то у меня есть код, которому не нужны какие-либо условия, которые можно легко выполнить для вашего первого условия.   -  person The Mechanic    schedule 10.05.2013
comment
Не должно быть кавычек около миллисекунд. Строка, на которую ссылается документация, является медленной/быстрой   -  person mplungjan    schedule 04.05.2017

Ответы (9)


arrow_upward
327
arrow_downward

Для этого вы можете установить функцию обратного вызова для команды анимации, которая будет выполняться после завершения анимации прокрутки.

Например:

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

Там, где находится этот код предупреждения, вы можете выполнить больше javascript, чтобы добавить дополнительную анимацию.

Кроме того, «колебание» предназначено для настройки смягчения. Посетите http://api.jquery.com/animate/ для получения дополнительной информации.

person TLS    schedule 10.05.2013
comment
Спасибо, Томас, это то, что мне было нужно. Я также добавил задержку, так как класс добавляется так быстро. if(top!=0) { console.log(скрытая прокрутка); body.animate({scrollTop:0}, '500', 'swing', function() { console.log(Завершенная анимация); leftitems.delay(1000).removeClass(slide); }); } - person Juan Di Diego; 10.05.2013
comment
Мне пришлось указать продолжительность анимации без кавычек, когда у меня было всего 2 параметра для функции анимации. Это было странно. - person iMatoria; 09.12.2013
comment
Я не уверен, что это потому, что этому посту 4 года, но я думаю, что в более новых версиях jQuery вам нужно удалить эти одинарные кавычки по времени: body.animate({scrollTop:0}, 500, 'swing', function () { предупреждение (анимация завершена); }); - person Andrew; 11.06.2014
comment
Между прочим, ваш обратный вызов будет выполнен дважды, потому что вы выбрали два элемента. - person Big McLargeHuge; 31.10.2014
comment
У Томаса была хорошая идея добавить body и html. Случай 1. Chrome читает тело и прокручивает, для этого FIrefox нужен html. - person fearis; 02.04.2015
comment
Только что попробовал - $('html') не работает в Chrome, а $('body') не работает в Firefox, поэтому $('html, body') необходим. А еще вызов .stop() — это хорошо — я несколько раз пытался быстро вызвать анимацию в хроме и после этого не мог прокрутить страницу вниз. - person Lev Lukomsky; 27.06.2016
comment
@ThomasStiegler Ты такой же, как мой день - person Owaiz Yusufi; 08.08.2018

arrow_upward
60
arrow_downward

Попробуйте этот код:

$('.Classname').click(function(){
    $("html, body").animate({ scrollTop: 0 }, 600);
    return false;
});
person Shailesh    schedule 10.05.2013
comment
Вместо этого следует использовать $("html"), потому что в вашем случае, если вы добавите функцию обратного вызова, она будет вызываться дважды, один раз для html и один раз для body. И использование body ничего не делает. - person flawyte; 13.12.2013
comment
кажется, это зависит от браузера. в некоторых $('html') может ничего не делать, поэтому вам нужно использовать оба и позаботиться о том, чтобы обратный вызов срабатывал дважды. - person commonpike; 09.02.2014

arrow_upward
35
arrow_downward

Использовать это:

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

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

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

});
person Beep    schedule 17.02.2015

arrow_upward
8
arrow_downward

для этого вы можете использовать метод обратного вызова

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

arrow_upward
7
arrow_downward

Попробуйте это вместо этого:

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');
      });
}
person Kishan Patel    schedule 10.05.2013

arrow_upward
6
arrow_downward

Простое решение:

прокрутка к любому элементу по 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;
    });
}
person T.Todua    schedule 02.12.2017
comment
'timelength' уже передан как параметр, поэтому нет необходимости объявлять его с помощью 'var'. «Редактировать» этот ответ было невозможно, так как он содержал менее 6 символов! ;-) +1 - person Anthony Walsh; 31.05.2019
comment
@AnthonyWalsh ни за что. var нужен, чтобы не перезаписывать глобальную (если есть глобальная переменная с таким именем) - person T.Todua; 01.06.2019
comment
Справедливо ;-) Я использую TypeScript и передаю число непосредственно в качестве параметра для timelength, так что в моем случае вся локальная область. Ваше здоровье! - person Anthony Walsh; 03.06.2019

arrow_upward
4
arrow_downward

Код с функцией клика()

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

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

});

.toTop = класс выбранного элемента может быть img или a

person Scorby    schedule 05.04.2015

arrow_upward
1
arrow_downward

вы можете использовать как класс CSS, так и идентификатор HTML, чтобы сохранить его симметричным, например, я всегда использую класс 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;})
});
person Lord    schedule 30.06.2020

arrow_upward
0
arrow_downward

вы должны это увидеть

$(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;});});
person Remal Mahmud    schedule 27.03.2018