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 相关文章推荐
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
Sep 28 Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 Javascript
基于JavaScript实现轮播图代码
Jul 14 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
微信小程序 request接口的封装实例代码
Apr 26 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 Javascript
vue中实现移动端的scroll滚动方法
Mar 03 Javascript
js+css实现红包雨效果
Jul 12 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
CountUp.js数字滚动插件使用方法详解
Oct 17 Javascript
Nest.js环境变量配置与序列化详解
Feb 21 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
escape unescape的php下的实现方法
2007/04/27 PHP
PHP数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
Ucren Virtual Desktop V2.0
2006/11/07 Javascript
jquery 最简单的属性菜单
2009/10/08 Javascript
jquery的index方法实现tab效果
2011/02/16 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
JavaScript评论点赞功能的实现方法
2017/03/13 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
用vue封装插件并发布到npm的方法步骤
2017/10/18 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
Python检测网络延迟的代码
2018/05/15 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
python 基于opencv去除图片阴影
2021/01/26 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
国外平面设计第一市场:99designs
2016/10/25 全球购物
会计与审计专业自荐信范文
2014/03/15 职场文书
促销活动总结报告
2014/04/26 职场文书
商务考察邀请函模板
2015/02/02 职场文书
小学见习报告
2015/06/23 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle