首页 › 开发帮助文档 › 开发技术 › jquery top 按钮回到页面最顶端的实现

[jQuery] jquery top 按钮回到页面最顶端的实现

开发技术发布于：2021-07-10 15:29 | 阅读数：273 | 评论：0

1487 主题	0 回帖	1537 积分

网站编辑

积分: 1537

发消息

　　<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
     .container{
   background-color:#C4C4C4;
   height:1500px;
   width:600px;}
  #src-to-top{
  height:40px;
  width::40px;
  color:#fff;
  position:fixed;
  right:20px;
  bottom:20px;
  background-color:#AEAEAE;
  }
 
.showTop{
display:none;}
  </style>
   <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
  <div class="container"></div>
  <div id="src-to-top" class="showTop"><strong>TOP</strong></div>
  <script>
$(document).ready(function(e) {
//窗口滚动事件中 实现top按钮的显示与隐藏
window.οnscrοll=function(){
var scroT=$(window).scrollTop()
if(scroT>600){
$("#src-to-top").removeClass("showTop");
}else{
$("#src-to-top").addClass("showTop");
}
}
//实现 top单击回到顶部的事件
var istt=$("#src-to-top");
istt[0].οnclick=function(){
$(window).scrollTop(0);
}
      });
  </script>
</body>
</html>

免责声明：

1. 本站所有资源来自网络搜集或用户上传，仅作为参考不担保其准确性！

2. 本站内容仅供学习和交流使用，版权归原作者所有！© 查看更多

3. 如有内容侵害到您，请联系我们尽快删除，邮箱：kf@codeae.com

分享到： QQ好友和群 QQ空间

返回列表

江南才子 LV4

1537 经验

1487 文档

[jQuery] jquery top 按钮回到页面最顶端的实现

相关帖子

css3超酷的按钮鼠标经过特效

常用jquery右健禁止命令

javascript怎么实现窗口置顶

JavaScript怎样实现点击出现图片效果

nginx启ssi方法，宝塔面板nginx开启ssi

PHP模拟登陆抓取页面内容

取消后台登录IP验证，避免IP频繁变动无法登录或者频繁退出

Discuz3.4去除"您访问的页面无手机页面,是否进一步访问电脑”

使用原生querySelectorAll和forEach来实现点击切换

免插件、DZ内置JS轻松实现外链访问二次确认对话提示框

江南才子 LV4