1顶

自动识别窗口高度并显示返回顶部按钮

稿源：互联网 2022-04-02 21:40:32 点击： 3739 撤稿纠错

跟据窗口高度来显示返回顶部按钮，向下滚屏，然后点返回顶部，就看到效果了。

以下讨论的是和返回顶部相关的自动识别窗口高度并显示返回顶部按钮教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>返回顶部按钮</title>
  
<style type="text/css">
body{
 font:12px Verdana, Geneva, sans-serif;
 line-height:1.2;
 text-align:center;
}
#gotopbtn {
 width:100px;
 height:30px;
 background:#fff;
 position:fixed;
 bottom:100px;
 right:20px;
 display:none;
 cursor:pointer;
 font-size:14px;
 line-height:30px;
}
.main{
 width:100%;
 height:1500px;
 background:blue;
 margin:0 auto;
}
</style>
</head>
<body>
<div class="main"></div>
<div id="gotopbtn">返回顶部</div>
<script type="text/javascript">
 idTest=document.getElementById('gotopbtn');
 idTest.onclick=function (){
  document.documentElement.scrollTop=0;
  sb();
  }
 window.onscroll=sb;
 function sb(){
  if(document.documentElement.scrollTop==0){
   idTest.style.display="none";
   }else{
    idTest.style.display="block";
    }
  }
</script>
</body>
</html>

关于自动识别窗口高度并显示返回顶部按钮的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011012667191.shtml方便下次再访问哦。

·上一篇： hao123百度搜索框代码
·下一篇： 根据滚动条下拉滚动位置来显示和加载图片

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

自动识别窗口高度并显示返回顶部按钮

文章分类LIST >>返回首页

最新游戏

最新新闻