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

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

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

　　js网页滚动条滚动事件

　　?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<style type="text/css">
#top_div{
position:fixed;
bottom:80px;
right:0;
display:none;
}
</style>
<script type="text/javascript">
window.onscroll = function(){
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>
<a name="top">顶部<a>
<div id="top_div"><a href="#top">返回顶部</a></div>
<br />
<br />
<div>
这里尽量多些<br />以便页面出现滚动条，限于篇幅本文此处略去
</div>

　　例子语法解释

　　在 style 标签中首先定义 top_div css 属性：position:fixed;display:none; 是关键

　　javascript 语句中，t 得到滚动条向下滚动的位置，|| 是为了更好兼容性考虑

　　当滚动超过 300 (像素)时，将 top_div css display 属性设置为显示(inline)，反之则隐藏(none)

　　必须设定 DOCTYPE 类型，在 IE 中才能利用 document.documentElement 来取得窗口的宽度及高度

　　希望本文所述对大家的javascript程序设计有所帮助。

时间： 2024-08-02 01:39:30

js网页滚动条滚动事件实例分析的相关文章

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

本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件发生时,用js获得页面的scrollTop值,判断scrollTop为一个设定值时,显示"返回面部" js网页滚动条滚动事件 <style type="text/css"> #top_div{ position:fixed; bottom:80px; rig

js鼠标滑轮滚动事件绑定的简单实例

 本篇文章主要介绍了js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器).需要的朋友可以过来参考下,希望对大家有所帮助  代码如下: /** Event handler for mouse wheel event.           *鼠标滚动事件           */           var wheel = function(event) {               var delta = 0;               if (!event) /* For IE. */  

js监听滚动条滚动事件使得某个标签内容始终位于同一位置

 js如何监听滚动条滚动事件,使得某个标签内容始终位于同一位置,下面有个不错的示例,大家可以参考下 小知识点,废话不多说,直接上代码    css:   代码如下: <pre name="code" class="css"><style>  #anchor:{  position:absulate;  top:40%;  left:40%;  width:100px;  height:100px;  background-color:red;

js将滚动条滚动到指定位置的简单实现方法_javascript技巧

js将滚动条滚动到指定位置的简单实现方法 代码如下(主要是通过设置Location的hash属性): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&

js常用系统函数用法实例分析

 这篇文章主要介绍了js常用系统函数用法,实例分析了escape.parseInt.parseFloat.isNaN.isFinite等函数的用法,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了js常用系统函数用法.分享给大家供大家参考. 具体代码如下: 代码如下: <html> <head> </head> <body> <script type="text/javascript"> //1. escap

JS中prototype的用法实例分析

 这篇文章主要介绍了JS中prototype的用法,实例分析了JS中prototype的常见使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了JS中prototype的用法.分享给大家供大家参考.具体分析如下: JS中的phototype是JS中比较难理解的一个部分 本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展.我们称B的原型为A

js enter键激发事件实例代码_javascript技巧

如下所示: document.onkeydown = function (e) { if (!e) e = window.event; if ((e.keyCode || e.which) == 13) { $("#btnSubmit").click(); } } 以上这篇js enter键激发事件实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持. 以上是小编为您精心准备的的内容,在的博客.问答.公众号.人物.课程等栏目也有的相关内容,欢迎继续使用右上角

js跟随滚动条滚动浮动代码_javascript技巧

复制代码 代码如下: var str="客服"; var objFT=new FloatT("FloatMenu1",str,942,137,125,200,80,10); objFT.FloatRun(); //js跟随滚动条滚动 浮动 //pObjName:html 元素ID //pText:html 元素内容 //其它自己看 function FloatT(pObjName,pText,pstmnLEFT,pstmnGAP1,pstmnGAP2,pstmnBA

wap-手机端上用js 实现滚动条滚动到某div时，该div固定的问题

问题描述 手机端上用js 实现滚动条滚动到某div时,该div固定的问题 各位大侠,小弟遇到一个关于js的问题,不知道哪位大侠有没有遇到过,求助求助? 需求:当滚动值大于等于某个层跟顶部的偏移值时,这个层就固定在页面上(position:fixed); 小于则恢复原样:我这代码在pc端向上滚动 取消固定的过程没什么问题,但是到手机上向上滚动取消固定就会有延迟,如下图要等要完全滚动关闭后,恢复成下图这样: 解决方案 js中给div加滚动条div固定位置,不随滚动条滚动固定div位置,不随滚动条滚动