js网页滚动条滚动事件实例分析

这篇文章主要介绍了js网页滚动条滚动事件的用法,实例分析了javascript中window.onscroll监控滚动条滚动事件的相关技巧,需要的朋友可以参考下。

本文实例讲述了js网页滚动条滚动事件用法。分享给大家供大家参考。具体分析如下：

　　在做js返回顶部的效果时，要监听网页滚动条滚动事件，这个事件就是：window.onscroll。当onscroll事件发生时，用js获得页面的scrollTop值，判断scrollTop为一个设定值时，显示“返回面部"。

 

js网页滚动条滚动事件一：利用点击事件；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>BOM的滚动条事件</title>
    </head>
    <style type="text/css">
        #top_div{ 
            position:fixed; 
            bottom:80px; 
            right:0; 
            display:none; 
        } 
    </style>
    <body style="height: 3000px;">
        <p>顶部</p> 
        <div id="top_div"><p>返回顶部</p></div> 
        <script>
            window.onscroll = function(){ 
　　　　　　　　　// document.documentElement.scrollTop用来兼容IE
                var t = document.documentElement.scrollTop || document.body.scrollTop;  
                var top_div = document.getElementById( "top_div" ); 
                if( t >= 300 ) { 
                    top_div.style.display = "inline"; 
                    top_div.onclick = function(){
                        window.scrollTo(0, 0);
                    }
                } else { 
                    top_div.style.display = "none"; 
                } 
            } 
        </script>
    </body>
</html>

 

js网页滚动条滚动事件二：利用锚链接：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>BOM的滚动条事件</title>
    </head>
    <style type="text/css">
        #top_div{ 
            position:fixed; 
            bottom:80px; 
            right:0; 
            display:none; 
        } 
    </style>
    <body style="height: 3000px;">
        <a name="top">顶部<a> 
        <div id="top_div"><a href="#top">返回顶部</a></div> 
        <script>
            window.onscroll = function(){ 
　　　　　　　　  // document.documentElement.scrollTop用来兼容IE
                var t = document.documentElement.scrollTop || document.body.scrollTop;  
                var top_div = document.getElementById( "top_div" ); 
                if( t >= 300 ) { 
                    top_div.style.display = "inline"; 
                } else { 
                    top_div.style.display = "none"; 
                } 
            }
        </script>
    </body>
</html>

 

例子语法解释：

　　在 style 标签中首先定义 top_div css 属性：position:fixed;display:none; 是关键javascript 语句中，t 得到滚动条向下滚动的位置，|| 是为了更好兼容性考虑当滚动超过300 （像素）时，将 top_div css display 属性设置为显示(inline)，反之则隐藏(none)必须设定 DOCTYPE 类型，在 IE 中才能利用 document.documentElement 来取得窗口的宽度及高度。

 

posted @ 2017-05-11 10:48  谭翔随笔  阅读(2599)  评论(0)  编辑  收藏  举报