zoukankan      html  css  js  c++  java
  • 点击回到顶部的按钮

    在很多网站页面中如果我们把页面下拉很多的时候,右边一般都有一个按钮点击可以直接回到顶部,并且无论滚动条下拉多少这个小方块都保持在右边画面中心

    简单分析下我们知道,这个小方块是绝对定位,当我们拉动滚动条的时候获取滚动的距离,然后让方块的top值等于滚动的距离。触发方块的点击事件时让top值为0

    一 html && css 代码如下:

    <style>
    		#box{100px;height: 100px;background: red;position: absolute;right:0;}
    	</style>
    </head>
    <body style="height:3000px;">
    	<div>我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部</div>
    	<div id="box"></div>
    </body>
    

    二 js代码如下:

    //回到顶部那个小方块必须在浏览器可视区的正中间
    
    //获取可视区的高度的一半减去元素的高度的一半  (当前元素就会在浏览器的正中央)
    
    var iH = document.documentElement.clientHeight/2-box.offsetHeight/2;
    box.style.top = iH+'px';
    
    
    window.onscroll = function(){
    	//滚动的时候获取滚动条的滚动距离
    	var t = document.documentElement.scrollTop || document.body.scrollTop;
    	//小方块的top值就等于 iH+ 滚动条的滚动距离  滚动条拉动然后页面往下拉同时小方块的top值同步变化才能保持在可视区域的中央所以top值要加上滚动距离
    	box.style.top = t+iH+'px';
    }
    
    box.onclick = function(){
    	//让滚动条的滚动距离为0就可以回到顶部了
    	document.documentElement.scrollTop = document.body.scrollTop = 0
    }
    
    /*var iH=document.documentElement.clientHeight/2-box.offsetHeight/2;
    box.style.top=iH+"px";
    window.onscroll=function(){
    	var t=document.documentElement.scrollTop||document.body.scrollTop;
    	box.style.top=iH+t+"px";
    }
    box.onclick=function(){
    	document.documentElement.scrollTop=document.body.scrollTop=0
    
    }
    

      

  • 相关阅读:
    git 常用命令 command 1.0(本地 local repository 对远程仓库 remote repository 的操作)
    git 常用命令 command
    git .gitignore 忽略列表
    节点的类型
    Error.name 六种值对应的信息
    js或jquery中的验证
    转载:JavaWeb学习总结(五十三)——Web应用中使用JavaMail发送邮件
    转载:JavaWeb学习总结(五十二)——使用JavaMail创建邮件和发送邮件
    转载:JavaWeb学习总结(五十一)——邮件的发送与接收原理
    转载:JavaWeb学习总结(五十)——文件上传和下载
  • 原文地址:https://www.cnblogs.com/MikePan/p/9123233.html
Copyright © 2011-2022 走看看