Как перейти к началу страницы с помощью jQuery

Вы можете использовать метод jQuery animate() в сочетании со свойством scrollTop для плавной прокрутки к верхней части веб-страницы с помощью анимации.

Давайте посмотрим следующий пример, чтобы понять, как это работает:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery scrollTop Animation</title>
<style>
    .scroll-top{
        position: fixed;
        bottom: 10px;
        right: 10px;
        z-index: 99;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $(".scroll-top").click(function() {
        $("html, body").animate({ 
            scrollTop: 0 
        }, "slow");
        return false;
    });
});
</script>
</head>
<body>
    <button type="button" class="scroll-top">Go to Top</button>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</body>
</html>

Однако, если вы просто хотите прокрутить страницу до верхней части без какой-либо анимации или jQuery, вы можете использовать собственный метод JavaScript window.scrollTo(x-coord, y-coord), например:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Scroll to Top</title>
<style>
    .scroll-top{
        position: fixed;
        bottom: 10px;
        right: 10px;
        z-index: 99;
    }
</style>
<script>
    function goToTop(){
        window.scrollTo(0, 0);
    }
</script>
</head>
<body>
    <button type="button" class="scroll-top" onclick="goToTop();">Go to Top</button>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</body>
</html>

Вы также можете сделать то же самое с помощью якорей (#), например <a href="#">Go to Top</a>. Однако это добавит строку #top в URL-адрес страницы.

Читайте также

Похожие примеры: