JavaScript实现网页带动画返回顶部的方法详解
当我们浏览很长的网页时，我们会发现有时候需要快速回到页面的顶部。通常，我们可以直接点击页面的滚动条或者键盘的 Home 键，但这种方式比较突兀。另外，很多时候我们需要一个能够流畅返回顶部的效果。在这里，我们将详细讲解使用JavaScript实现网页带动画返回顶部的方法。
实现步骤
实现网页带动画返回顶部的方法，具体步骤如下：
- 判断页面是否需要显示“返回顶部”按钮。
- 给“返回顶部”按钮添加点击事件。
- 在点击事件中，平滑滚动页面到顶部。
下面，我们将分别介绍每个步骤的实现方法。
判断页面是否需要显示“返回顶部”按钮
首先，我们需要判断页面是否已经滚动到一定高度，如果已经滚动则需要显示“返回顶部”按钮，否则不需要。可以使用scrollTop属性获取页面当前垂直滚动的距离，如下：
// 获取窗口滚动条距离页面顶部的距离
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
说明：上述代码可以兼容多种浏览器。
接下来，我们可以根据scrollTop的值来判断是否需要显示“返回顶部”按钮，如果大于某个阈值，则显示按钮，否则隐藏按钮。例如，下面的代码会在页面滚动超过100像素后，显示一个返回顶部的超链接：
window.onscroll = function(){
var toTop = document.querySelector('.to-top'); // 获取返回顶部按钮的元素
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop>100){
toTop.style.display = 'block';
} else {
toTop.style.display = 'none';
}
}
给“返回顶部”按钮添加点击事件
接下来，我们需要给“返回顶部”按钮添加点击事件。通过设置window.scroll()方法的第三个参数，可以实现平滑滚动页面。例如，下面的代码会在点击按钮后，平滑地滚动页面至顶部：
var toTopButton = document.querySelector('.to-top');
toTopButton.addEventListener('click',function(){
scrollTo(0,0,{
duration:800,
timingFunction:function(timeFraction){
return timeFraction;
}
});
});
function scrollTo(to,duration,callback){
var element = document.documentElement;
var from = element.scrollTop;
var start = performance.now();
function scroll(timestamp){
var time = timestamp - start;
var progress = Math.min(time/duration,1);
function easeOutQuad(progress){
return progress * (2 - progress);
};
element.scrollTop = from + (to - from) * easeOutQuad(progress);
if(progress < 1){
requestAnimationFrame(scroll);
} else {
callback();
}
}
requestAnimationFrame(scroll);
}
平滑滚动页面到顶部
最后，我们需要实现一个平滑滚动页面的方法，这个方法会根据滚动距离的时间来调整滚动速度。例如，下面的代码会实现一个简单的缓动函数，根据进度值返回当前动画阶段的滚动距离：
function scrollTo(to,duration,callback){
var element = document.documentElement;
var from = element.scrollTop;
var start = performance.now();
function scroll(timestamp){
var time = timestamp - start;
var progress = Math.min(time/duration,1);
function easeOutQuad(progress){
return progress * (2 - progress);
};
element.scrollTop = from + (to - from) * easeOutQuad(progress);
if(progress < 1){
requestAnimationFrame(scroll);
} else {
callback();
}
}
requestAnimationFrame(scroll);
}
将这段代码与“返回顶部”按钮点击事件结合使用，即可完成页面的平滑滚动到顶部。
示例
这里提供两个示例，一个是基于jQuery的示例，另一个是基于原生JavaScript的示例。
基于jQuery的示例
<!DOCTYPE html>
<html>
<head>
<title>返回顶部示例（jQuery）</title>
</head>
<body>
<div style="height:2000px;"></div>
<a href="#" class="back-to-top">返回顶部</a>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
// 返回顶部按钮显示/隐藏逻辑
$(window).scroll(function(){
if ($(window).scrollTop()>=100){
$('.back-to-top').fadeIn();
} else {
$('.back-to-top').fadeOut();
}
});
// 平滑滚动至顶部
$('.back-to-top').click(function(){
$('html,body').animate({scrollTop:0},500);
return false;
});
});
</script>
</body>
</html>
基于原生JavaScript的示例
<!DOCTYPE html>
<html>
<head>
<title>返回顶部示例（JavaScript）</title>
</head>
<body>
<div style="height:2000px;"></div>
<a href="#" class="back-to-top">返回顶部</a>
<script>
// 返回顶部按钮显示/隐藏逻辑
window.onscroll = function(){
var toTop = document.querySelector('.back-to-top');
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop>100){
toTop.style.display = 'block';
} else {
toTop.style.display = 'none';
}
}
// 平滑滚动至顶部
document.querySelector('.back-to-top').onclick = function(){
var scrollTop = window.scrollY;
scrollTo(scrollTop,0,500);
}
function scrollTo(from,to,duration){
var start = performance.now();
var element = document.documentElement;
function scroll(timestamp){
var time = timestamp - start;
var progress = Math.min(time/duration,1);
function easeOutQuad(progress){
return progress * (2 - progress);
};
element.scrollTop = from + (to - from) * easeOutQuad(progress);
if(progress < 1){
requestAnimationFrame(scroll);
}
}
requestAnimationFrame(scroll);
}
</script>
</body>
</html>
通过以上示例，你可以学习到如何使用jQuery或原生JavaScript实现平滑滚动页面回到顶部的效果。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript实现网页带动画返回顶部的方法详解 - Python技术站
微信扫一扫 
支付宝扫一扫 