回到顶部

最新推荐文章于 2024-07-24 11:22:34 发布
最新推荐文章于 2024-07-24 11:22:34 发布
阅读量218 收藏
点赞数
文章标签： function border null
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tianxueshan2010/article/details/5678864
版权
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml">   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  5. <title>仿淘宝回到顶部代码</title>   
  6. <!--[if lt IE 7]>   
  7. <style type="text/css">  
  8. #gotopbtn{position:absolute;top:expression(eval(document.documentElement.scrollTop + 350));}   
  9. </style>   
  10. <![endif]-->   
  11. <style type="text/css">   
  12. body{   
  13. font:12px Verdana, Geneva, sans-serif;   
  14. line-height:1.2;   
  15. text-align:center;   
  16. margin:0px;   
  17. }  
  18. #gotopbtn {   
  19. width:100px;   
  20. height:30px;   
  21. background:#fff;   
  22. position:fixed;   
  23. bottom:100px;   
  24. right:20px;   
  25. display:none;   
  26. cursor:pointer;   
  27. font-size:14px;   
  28. line-height:30px;   
  29. border:1px solid #aaa;   
  30. }   
  31. .main{   
  32. width:100%;   
  33. background:#ccc;   
  34. margin:0 auto;   
  35. }   
  36. </style>   
  37. </head>   
  38. <body>   
  39. <div class="main">   
  40. <img src="/webkey.png" width="1004" height="2408"><br>   
  41. </div>   
  42. <div id="gotopbtn">返回顶部</div>   
  43. <script type="text/javascript">   
  44. backTop=function (btnId){   
  45. var btn=document.getElementById(btnId);   
  46. var d=document.documentElement;   
  47. window.οnscrοll=set;   
  48. btn.οnclick=function (){   
  49. btn.style.display="none";   
  50. window.οnscrοll=null;   
  51. this.timer=setInterval(function(){   
  52. d.scrollTop-=Math.ceil(d.scrollTop*0.1);   
  53. if(d.scrollTop==0) clearInterval(btn.timer,window.οnscrοll=set);   
  54. },10);   
  55. };   
  56. function set(){btn.style.display=d.scrollTop?'block':"none"}   
  57. };   
  58. backTop('gotopbtn');   
  59. </script>   
  60. </body>   
  61. </html>  
tianxueshan2010
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript回到顶部特效
10-21
标题中的“javascript回到顶部特效”指的是在网页浏览时，通过点击一个特定的按钮，使得页面瞬间滚动回顶部的功能。这个特效通常用于提升用户体验，让用户在浏览长页面时能轻松返回页面开头。描述中提到，该特效具有...
jquery回到顶部demo
10-10
【jQuery回到顶部功能详解】 在网页设计中，用户在浏览长页面时，有时需要快速返回页面顶部，这就需要用到“回到顶部”功能。本教程将详细讲解如何使用jQuery实现这一功能，以及相关的优化策略。 首先，我们需要...
vue 局部回到顶部_vue中回到顶部
weixin_33700809的博客
02-11 1026
1. 回到顶部，使用 scrollIntoView 方法：Element.scrollIntoView方法滚动当前元素，进入浏览器的可见区域该方法可以接受一个布尔值作为参数。如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐(前提是当前区域可滚动)；如果为false，表示元素的底部与当前区域的可见部分的尾部对齐(前提是当前区域可滚动)。如果没有提供该参数，默认为true使用该方法的原理与...
js 平滑回到顶部
weixin_47581490的博客
05-05 389
behavior: 'smooth', // 平滑过渡。方法四：直接回到顶部（无过渡效果）方法三：锚点定位（无过渡效果）
uniapp实现回到顶部功能
qq_38937194的博客
07-24 143
【代码】uniapp实现回到顶部功能。
html设置回到顶部按钮,给网站添加回到顶部按钮
weixin_34546240的博客
06-19 1529
一直就想给博客添加个类似新浪微博一侧的回到底部按键，奈何自己不懂很多网站代码设计的东西。直到前天mg12的博客发了篇新博文(jQuery 跟随浏览器窗口的回到底部按键)介绍了添加方式跟脚本以后才动手弄了个，具体演示可以看我的博客右下方。参数描述：1.下载所需文件下载一个Go Top功能脚本typecho回到顶部，点击下载(Go Top+滚动疗效) ，或者参考我博客的js文件 //gotop 和 /...
Vue使用Element-UI时点击下一页回到顶部（锚点）
weixin_41740463的博客
08-25 1936
Vue使用Element-UI时点击下一页回到顶部（锚点）
回到顶部功能
欢迎欢迎
01-04 261
ref用于下面获取dom节点 <div ref='home'></div> <span class="topBtn" v-show="topShow" @click="topHui">回到顶部</span> mounted() { 获取html元素refs是vue提供的获取元素的方法 this.$refs.home.addEventListener('scroll',this.handlerscroll) }, des...
vue一键回到顶部
m0_53912016的博客
07-07 676
点击回到顶部方法
锚点回到顶部
keep789的博客
08-17 3542
锚点在本页面跳转有三种方式比较常用，可以用来回到顶部，代码奉上。 1.给锚点文本标签添加id,针对任何标签来定位都生效 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type=&quo
Vue3回到顶部（BackTop）
Mr Dear的博客
09-04 1995
无论浏览到何处都可以看见的按钮，帮助你回到最初的那个地方！功能丰富，简单易用😁😁
jquery html回到顶部
07-12
jquery html回到顶部 适应h5 手机端 参考地址 ...
回到顶部JavaScript插件
03-16
6. **事件处理**：当用户点击按钮时，需要有一个事件处理器来响应这个点击事件，让页面立即滚动回顶部。这可以通过为按钮添加`onclick`事件监听器来实现。 7. **性能优化**：为了避免频繁的事件处理造成性能问题，...
仿淘宝回到顶部
05-07
在电子商务网站设计中，"回到顶部"功能是一个非常实用且用户体验友好的元素，尤其是在像淘宝这样的大型购物平台中。这个功能允许用户快速便捷地返回页面的顶部，无需滚动整个页面，提高了浏览效率。ShopEx易开店作为...
城市生命线智慧管廊解决方案.pptx
最新发布
08-13
城市生命线智慧管廊解决方案.pptx
智慧园区综合管理平台系统解决方案-2.pptx
08-13
智慧园区综合管理平台系统解决方案-2.pptx
财务收支管理系统-出纳账.xlsm
08-13
工资表，财务报表，对账表，付款申请，财务报告，费用支出表，财务收支 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
Python3.0-3.3安装包合集
08-13
Python3.0-3.3安装包合集
vue element回到顶部
01-20
这样，页面中就会显示一个按钮，当用户点击它时，页面会平滑地滚动回顶部。 以上就是使用Vue.js和Element UI实现回到页面顶部的简单方法。通过引入Element UI提供的`el-backtop`组件，你可以轻松地为你的Vue应用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值