• 点击回到顶部的按钮


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

    简单分析下我们知道,这个小方块是绝对定位,当我们拉动滚动条的时候获取滚动的距离,然后让方块的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
    
    }
    

      

  • 相关阅读:
    java中bean和xml相互转换
    java操作zip文件
    java内置的解压缩工具
    java操作Excel简单入门
    java开发IDEA插件入门
    java中Class.getResourceAsStream()和ClassLoader.getResourceAsStream()的区别
    java中文转拼音
    vue父子组件通信
    学会使用box-sizing布局
    webpack-dev-server 导致的 invalid host header
  • 原文地址:https://www.cnblogs.com/MikePan/p/9123233.html
Copyright © 2020-2023  润新知