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?

Спасибо!

Ответ 1

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

Например:

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

Где этот код предупреждения, вы можете выполнить больше javascript для добавления в дальнейшую анимацию.

Кроме того, "swing" используется для установки ослабления. Подробнее см. http://api.jquery.com/animate/.

Ответ 2

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

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

Ответ 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

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

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

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

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

Ответ 6

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

прокрутка к любому элементу по ИД или ИМЯ:

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

Ответ 7

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

    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

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

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