弹性返回顶部JS代码放在网页的哪里?

发布网友发布时间：2022-04-26 15:09

我来回答

共3个回答

懂视网时间：2022-04-07 13:48

本篇文章给大家带来的内容是JavaScript仿淘宝回到顶部效果（代码示例）。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

需求：当滚动条到一定位置时侧边栏固定在某个位置，再往下滑动到某一位置时显示回到顶部按钮。点击按钮后页面会动态滑到顶部，速度由快到慢向上滑。

思路：

1、页面加载完毕才能执行js代码

　　可以将js代码写在最下边（本次回顶示例是用的这种）

　　想写在上边可以用下边这两种：

　　 ①window.onload = function() {...}

　　　②window.addEventListener('load', function() {...})

2、获取需要用到的元素

3、绑定滚动事件 scroll

当用户滚到banner模块时使侧边栏变为固定状态

if(window.pageYOffset >= bannerTop) { // window.pageYOffset 屏幕被滚上去的距离
 sliderbar.style.position = 'fixed'; // 当用户滚到banner模块时使侧边栏变为固定状态
 sliderbar.style.top = sliderbarTop + 'px'; 
} else {
 sliderbar.style.position = 'absolute';
 sliderbar.style.top = '300px';
}

当用户滚到main模块时显示返回顶部按钮

 if(window.pageYOffset >= mainTop) { // 当用户滚到main模块时显示返回顶部按钮
 goBack.style.display = 'block';
 } else {
 goBack.style.display = 'none';
 }

4、绑定点击事件 click

点击返回顶部按钮后页面会动态滑到顶部，速度由快到慢向上滑动

 sliderbar.addEventListener('click', function() {
 animate(window, 0);
 })

5、关于动画函数 animate(obj, target, callback)

这里obj对象即是window；target目标位置即是0；callback是回调函数，没传参的话就可以忽略

设置一个定时器 setInterval();

声明一个step作为步长值，值为顶部位置到当前滚动条位置之差除以10（step会越来越小，滚动速度也就越来越慢，实现了滚动条的速度由快到慢的滑上去）

var step = (target - window.pageYOffset) / 10;

然而step并不总是整数，当step不是整数时可以让滚动条再往前走一丢丢。滚动条可以上下滑动，所以step可能大于零也可能小于零。大于零向上取整,小于零向下取整

step = step > 0 ? Math.ceil(step) : Math.floor(step);

window.scroll(x, y) 滚动到文档特定位置，定时器每次调用函数都会往上滑一点

window.scroll(0, window.pageYOffset + step);

判断动画是否执行完毕，如果执行完毕则关闭定时器 clearInterval();

if(window.pageYOffset == target) { // 当页面回到顶部后(即动画执行完) 清除定时器
 clearInterval(obj.timer);
 // 判断是否传了回调函数
 /* if(callback) { 
 callback();
 } */
 // 可以简写为下边这种。 &&是短路运算符，存在callback（即第一个式子为true）时才会继续执行callback()
 callback && callback();
}

详细代码如下：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>返回顶部效果</title>
 <style>
 .slider-bar {
  position: absolute;
  left: 47%;
  top: 300px;
  margin-left: 600px;
  width: 45px;
  height: 130px;
  background-color: pink;
  cursor: pointer;
 }
 .w {
  width: 1100px;
  margin: 10px auto;
 }
 .header {
  height: 150px;
  background-color: purple;
 }
 .banner {
  height: 250px;
  background-color: skyblue;
 }
 .main {
  height: 1000px;
  background-color: yellowgreen;
 }
 span {
  display: none;
  position: absolute;
  bottom: 0;
 }
 </style>
</head>
<body>
 <div>
 <span>返回顶部</span>
 </div>
 <div class="header w">头部区域</div>
 <div class="banner w">banner区域</div>
 <div class="main w">主体部分</div>

 <script>
 // querySelector() 方法返回匹配指定选择器（）的第一个元素，传的必须是字符串
 var sliderbar = document.querySelector('.slider-bar');
 var banner = document.querySelector('.banner');
 var bannerTop = banner.offsetTop; // banner模块距离顶部的长度
 var sliderbarTop = sliderbar.offsetTop - bannerTop; // 侧边栏固定后距离顶部的长度

 var main = document.querySelector('.main');
 var goBack = document.querySelector('.goBack');
 var mainTop = main.offsetTop; // main模块距离顶部的长度
 
 // scroll 屏幕发生滚动事件时执行
 document.addEventListener('scroll', function() {
  if(window.pageYOffset >= bannerTop) { // window.pageYOffset 屏幕被滚上去的距离
  sliderbar.style.position = 'fixed'; // 当用户滚到banner模块时使侧边栏变为固定状态
  sliderbar.style.top = sliderbarTop + 'px'; 
  } else {
  sliderbar.style.position = 'absolute';
  sliderbar.style.top = '300px';
  }
  
  if(window.pageYOffset >= mainTop) { // 当用户滚到main模块时显示返回顶部按钮
  goBack.style.display = 'block';
  } else {
  goBack.style.display = 'none';
  }
  
 });
 sliderbar.addEventListener('click', function() {
  animate(window, 0);
 })

 /* 动画函数：
  * obj 做动画的对象（这里就是指window）
  * target 目标位置（顶部）
  * callback 回调函数（没有传参的话就不执行）
  */
 function animate(obj, target, callback) {
  clearInterval(obj.timer); // 先清除定时器，保证只有一个定时器在执行，以免出现bug
  obj.timer = setInterval(function() {
  // window.pageYOffset距离顶部的距离（是负的）
  var step = (target - window.pageYOffset) / 10; // step步长（让页面速度逐渐变慢的滑动上去）
  step = step > 0 ? Math.ceil(step) : Math.floor(step); // step并不总是整数。大于零向上取整,小于零向下取整
  if(window.pageYOffset == target) { // 当页面回到顶部后(即动画执行完) 清除定时器
   clearInterval(obj.timer);
   // 判断是否传了回调函数
   /* if(callback) { 
   callback();
   } */
   // 可以简写为下边这种。 &&是短路运算符，存在callback（即第一个式子为true）时才会继续执行callback()
   callback && callback();
  }
  // window.scroll(x, y) 滚动到文档特定位置
  window.scroll(0, window.pageYOffset + step);
  }, 15);
 }
 </script>
</body>
</html>

更多炫酷javascript特效代码，尽在：js特效大全

热心网友时间：2022-04-07 10:56

测试过，代码没问题，估计是你放错位置了：
1、把scrolltop.js和lrtk.css放在头部，按实际修改下面的js和css目录
<head>
<SCRIPT type=text/javascript src="js/scrolltop.js"></SCRIPT>
<LINK rel=stylesheet type=text/css href="css/lrtk.css">
</head>
注：lrtk.css 里的BODY {HEIGHT: 3600px;}可以删除
2、在body里放上下面两行代码即可
<DIV style="DISPLAY: none" id=goTopBtn><IMG border=0 src="images/lanren_top.jpg"></DIV>
<SCRIPT type=text/javascript>goTopEx();</SCRIPT>
另外，当内容超过一屏且滚动条向下移时才会出现返回顶部的按钮！

热心网友时间：2022-04-07 12:14

用a写一个定位一个触发定位的这样写<a target="自定义名称"><img src="你的banner图片源"></a>至于这个锚点怎么是具体情况而定我给你推荐的是放在比较靠前的广告条触发的这样写<a href="前面的target名称">回顶部</a> 两个都部署好那么就可以了
追问弹性返回顶部JS代码,下载下来之后就打开就是像图片中一样。

全部频道

弹性返回顶部JS代码放在网页的哪里?