Вы можете использовать метод 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-адрес страницы.
