Как прокрутить страницу вверх до перехода на другую страницу, когда пользователь нажимает на ссылку?

Question

Я пытаюсь создать гладкие переходы страницы на своем веб-сайте, чтобы пользователь не ощущал «загрузку страницы», когда он нажимает ссылку на другую страницу. Два примера того, что я хочу, это minimalissimo.com и defringe.com. Когда вы нажимаете ссылку на другую статью на любой странице этих сайтов, страница оживляет прокрутку вверх до начала загрузки следующей страницы.

До сих пор у меня есть следующий код:

jQuery(document).ready(function($){ 

    $back_to_top = $('.link-to-article'); 

    $back_to_top.on('click', function(){ 
    $("html, body").animate({scrollTop:0},260); 
    }); 

}); 

Приведенный выше код не работает, нет прокрутки не происходит при нажатии на ссылку с этим классом; однако, если я использую запрет по умолчанию, то страница выполняет прокрутку вверх, но, конечно, следующая страница не открывается, поскольку ссылка отключена с помощью предупрежденияDefault.

Пожалуйста, дайте мне знать, если вы можете помочь. Спасибо.

Answer 1

Вы правы, что вам нужно будет использовать preventDefault, но вы также должны вручную перенаправить раз завершения анимации:

$back_to_top.on('click', function(){ 
    var href = $(this).attr('href'); 
    $(document.body).animate({scrollTop:0}, 260, function() { 
     window.location.href = href; 
    }); 
    return false; 
}); 

Answer 2

jQuery(document).ready(function ($) { 
    $back_to_top = $('.link-to-article'); 

    $back_to_top.on('click', function (e) { 
     e.preventDefault(); 
     $this = $(this); 
     $("html, body").animate({ 
      scrollTop: 0 
     }, 260, function() { 
      window.location.href = $this.attr('href'); 
     }); 
    }); 
}(jQuery));