JavaScript实现网页带动画返回顶部的方法详解
发布网友
发布时间：2025-01-13 13:56
共1个回答
热心网友
时间：2025-01-13 14:02
在进行网站维护时，我发现之前的返回顶部功能有些不够完美。经过一番思考，我决定尝试用原生JavaScript实现一个带有动画效果的返回顶部按钮。下面是具体的代码实现。
首先，我们需要定义一个按钮元素，并设置其样式。代码如下：
<div class="to_top"><img src="http://img.558idc.com/uploadfile/allimg/javascript/timg.jpg" alt="" width="70;" /></div>
接着，我们需要编写JavaScript代码来实现返回顶部功能。这里提供一种方法：
<script type="text/javascript"> window.onscroll = function(){ var timer = null; var isTop = true; var obtn = document.getElementsByClassName('to_top')[0]; obtn.onclick = function(){ timer = setInterval(function(){ var osTop = document.documentElement.scrollTop || document.body.scrollTop; var isSpeed = Math.floor(-osTop/6); document.documentElement.scrollTop = document.body.scrollTop = osTop+isSpeed; if (osTop == 0) { clearInterval(timer); } isTop = true; },30); }; var client_height = document.documentElement.clientHeight || document.body.clientHeight; if (osTop = client_height) { obtn.style.opacity = '1'; } else{ obtn.style.opacity = '0'; } if(!isTop){ clearInterval(timer); } isTop = false; } </script>
以上代码可以放到HTML文件中直接运行。代码中使用了定时器，通过逐渐减少页面滚动的距离来实现平滑的动画效果。当然，实现返回顶部功能的方法还有很多，以下提供两种不同的实现方式供参考。
方法一：
<script> window.onload = function(){ var btn = document.getElementById('btn'); var timer = null; var isTop = true; var clientHeight = document.documentElement.clientHeight; window.onscroll = function() { var osTop = document.documentElement.scrollTop || document.body.scrollTop; if (osTop = clientHeight) { btn.style.display = "block"; } else { btn.style.display = "none"; }; if (!isTop) { clearInterval(timer); }; isTop = false; }; btn.onclick = function() { timer = setInterval(function(){ var osTop = document.documentElement.scrollTop || document.body.scrollTop; var ispeed = Math.floor(-osTop / 7); document.documentElement.scrollTop = document.body.scrollTop = osTop+ispeed; if (osTop == 0) { clearInterval(timer); }; isTop = true; },30); }; }; </script>
方法二：
<script> var sliderbar = document.querySelector('.slider-bar'); var banner = document.querySelector('.banner'); var bannerTop = banner.offsetTop; var sliderbarTop = sliderbar.offsetTop - bannerTop; var main = document.querySelector('.main'); var goBack = document.querySelector('.goBack'); var mainTop = main.offsetTop; document.addEventListener('scroll', function() { if(window.pageYOffset = bannerTop) { sliderbar.style.position = 'fixed'; sliderbar.style.top = sliderbarTop + 'px'; } else { sliderbar.style.position = 'absolute'; sliderbar.style.top = '300px'; } if(window.pageYOffset = mainTop) { goBack.style.display = 'block'; } else { goBack.style.display = 'none'; } }); sliderbar.addEventListener('click', function() { animate(window, 0); }) function animate(obj, target, callback) { clearInterval(obj.timer); obj.timer = setInterval(function() { var step = (target - window.pageYOffset) / 10; step = step 0 ? Math.ceil(step) : Math.floor(step); if(window.pageYOffset == target) { clearInterval(obj.timer); callback callback(); } window.scroll(0, window.pageYOffset + step); }, 15); } </script>
到此，关于JavaScript实现网页带动画返回顶部的方法就介绍完了。希望这些代码能对你的网站优化有所帮助！
