javascript实现博客园页面右下角返回顶部按钮


Posted in Javascript onFebruary 22, 2015

博客园中很多博友的博客中在Page右下角都有个图标,不论屏幕怎么拉伸,都始终停留在右下角。点击后页面置顶。后面想想写一个Demo来实现这种效果吧。

     一. 图标右下角固定.

  1.SS 里面提供了4中布局方式. 其中fixed表示绝对定位元素。所以我们选择使用fixed来实现图标固定.

absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative 生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit 规定应该从父元素继承 position 属性的值。

        2.定代码如下。Button按钮将始终置于屏幕右下角。不论是拖动上下精度条还是拉伸浏览器窗口大小.

#myTopBtn{

        bottom: 5px;

        right: 5px;

        position:fixed;

    }

二. 实现点击后回到页面最上角.

1. 要想回到屏幕最上角就得小了解如何通过JavaScript还操作拖动条的上下移动.JavaScript提供了scrollby和scroll方法.

window.scrollBy(0,-30)  //屏幕上移30像素点

window.scroll(0,0) // 屏幕回到最上角

2. 上面已经提到了如何移动拖动条,那么如何实现按照一定的速度移动到page页顶部呢。那么就要借助setInterval和clearInterval方法. 实现没10毫秒屏幕上移30个像素点。

<body>

  <div id="myDiv" >

  </div>

  <button id="myTopBtn" onclick="TopFunc()">To Top</button>

</body>
 
var myVar;

    function TopFunc(){

        myVar=setInterval(EachScrollBy,10);    

    }
    function EachScrollBy(eachHeight){

        if(document.documentElement.scrollTop<=0){

            clearInterval(myVar);

        }else{

            window.scrollBy(0,-30);

        }

    }

        三. 扩展

实现了置顶按钮。那么我们如何实现点击按钮屏幕置底呢.其实原理差不多,这里就不写demo了。给大家提供一些属性做参考.

      网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight

网页可见区域宽:document.body.offsetWidth (包括边线的宽)

网页可见区域高:document.body.offsetHeight (包括边线的宽)

网页正文全文宽:document.body.scrollWidth

网页正文全文高:document.body.scrollHeight

网页被卷去的高:document.body.scrollTop

网页被卷去的左:document.body.scrollLeft

网页正文部分上:window.screenTop

网页正文部分左:window.screenLeft

屏幕分辨率的高:window.screen.height

屏幕分辨率的宽:window.screen.width

屏幕可用工作区高度:window.screen.availHeight

屏幕可用工作区宽度:window.screen.availWidth

以上就是本文的全部内容了,希望爱玩博客的童鞋们喜欢。

Javascript 相关文章推荐
js对数字的格式化使用说明
Jan 12 Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 Javascript
JavaScript iframe数据共享接口实现方法
Jan 06 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
使用yeoman构建angular应用的方法
Aug 14 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
Oct 10 Javascript
RequireJS用法简单示例
Aug 20 Javascript
js验证身份证号码记录的方法
Apr 26 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 #Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 #Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 #Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 #Javascript
jQuery常用数据处理方法小结
Feb 20 #Javascript
jQuery数据缓存用法分析
Feb 20 #Javascript
jQuery性能优化技巧分析
Feb 20 #Javascript
You might like
PHP数字格式化
2006/12/06 PHP
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
php实现JWT验证的实例教程
2020/11/26 PHP
firefox下frameset取不到值的解决方法
2010/09/06 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
2016/04/26 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
jquery+ajax+text文本框实现智能提示完整实例
2016/07/09 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
Python实现的HMacMD5加密算法示例
2018/04/03 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
django 中QuerySet特性功能详解
2019/07/25 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
保时捷设计:Porsche Design
2019/03/30 全球购物
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
我爱我的祖国演讲稿
2014/05/04 职场文书
教师爱岗敬业演讲稿
2014/05/05 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
2015元旦节寄语
2014/12/08 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python
python可视化大屏库big_screen示例详解
2021/11/23 Python