您现在的位置:圣剑网 >> 文章频道 >> 网站技术 >> 正文
JavaScript实现回到顶部
新闻来源:文章频道发布时间:2016-11-24 13:08我有话说(0)

HTML页面使用一个a标签,href内填写JavaScript:;以阻止默认行为,在学习实例的时候添加一个大的div来充实页面。

demo:

  <a href="javascript:;" id="btn" title="回到顶部"></a>

其css代码为:

#btn{
display: none;
position: fixed;
left: 90%;
bottom: 40px;
height:60px;
width: 60px;
background: url(img/22.ico) no-repeat left top;
background-size:100% auto;
border: solid 1px red;
border-radius: 5px;
}

补充几句话:

CSS书写顺序

1.位置属性(position, top, right, z-index, display, float等)

2.大小(width, height, padding, margin)

3.文字系列(font, line-height, letter-spacing, color- text-align等)

4.背景(background, border等)

5.其他(animation, transition等)

 

给回到顶部一个美化,红色边框让你更容易看到它。

 

JavaScript部分代码:

window.onload = function(){
                //获取相关
                var mybtn = document.getElementById("btn");
                var Time1 = null;
                var isTop = true;

                mybtn.onclick = function(){
                    //设置定时器
                    Time1 = setInterval(function(){
                        var osTop = document.body.scrollTop||document.documentElement.scrollTop;
                        //ceil向上取整,floor向下取整
                        var speed = Math.ceil(osTop/2);
                        //做一个变换速度的回到顶部效果
                        document.body.scrollTop = document.documentElement.scrollTop = osTop - speed;
                        if(osTop <= 0){
                            //清除定时器
                            clearInterval(Time1);
                        }
                        isTop = true ;
                    },100)
                }
                
                //页面滚动自动触发:
                window.onscroll = function(){
                    //获取页面可视区高度和滚动高度
                    var osTop = document.body.scrollTop||document.documentElement.scrollTop;
                    //这两个获取滚动的方法可以兼容多种浏览器
                    var clientHeight = document.documentElement.clientHeight;
                    //对回到顶部的隐藏和显示,在css中一开始可以设置为隐藏
                    if (osTop>clientHeight) {
                        mybtn.style.display = "block"
                    }
                    else{
                        mybtn.style.display = "none"
                    }
                    if (!isTop) {
                        clearInterval(Time1);
                    }
                    isTop = false;
                }
            }

另外补充:

1、各浏览器下 scrollTop的差异 
IE6/7/8: 
对于没有doctype声明的页面里可以使用  document.body.scrollTop 来获取 scrollTop高度 ; 
对于有doctype声明的页面则可以使用 document.documentElement.scrollTop; 
Safari: 
safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset ; 
Firefox: 
火狐等等相对标准些的浏览器就省心多了,直接用 document.documentElement.scrollTop ; 
2、获取scrollTop值 
完美的获取scrollTop 赋值短语 : 
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

通过这句赋值就能在任何情况下获得scrollTop 值。 

网友评论

关于圣剑 - 广告服务 - 招聘信息 - 友情连接 - 保护隐私权 - 意见反馈 - 帮助中心 - 联系我们

Copyright © 2016 Sjian.Net Inc. All Rights Reserved.大千网络科技有限公司 版权所有

不良信息举报中心 陕ICP备10005927号 陕公网安备61010402000003号