js网页滚动条滚动事件实例分析
作者:yongtaiyu 发布时间:2024-04-28 09:38:19
标签:js,滚动条
本文实例讲述了js网页滚动条滚动事件用法。分享给大家供大家参考。具体分析如下:
在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll。当onscroll事件发生时,用js获得页面的scrollTop值,判断scrollTop为一个设定值时,显示“返回面部”
js网页滚动条滚动事件
<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 来取得窗口的宽度及高度
http://tools.jb51.net/table/javascript_event
希望本文所述对大家的javascript程序设计有所帮助。
0
投稿
猜你喜欢
- 参考文章ubuntu源码安装python3linux 编译安装python3.6的教程详解准备工作安装工具sudo apt updatesu
- 目录1、表空间容量指标查询2、表空间扩容方式1:手工改变已存在数据文件的大小方式2:允许已存在的数据文件自动增长方式3:增加数据文件1、表空
- 1、findall函数返回字符串中所有匹配结果的正则表达式列表。2、如果没有分组的正则是返回的正则匹配,分组返回的是分组匹配而非整个正则匹配
- --程序员们在编写一个雇员报表,他们需要得到每个雇员当前及历史工资状态的信息, --以便生成报表。报表需要显示每个人的晋升日期和工资数目。
- 更轻量- 出色的颗粒化模块,子模块划分;- 延迟加载;- 强调代码重用(公共基类、插件、扩展);更易用- 统一的API;- 便利(each,
- 昨天碰到的,如果键是中文,如何进行匹配呢,先看文本内容: 这是字典里两个元素的内容,编码是utf-8,中文内容运行代码如下# -*- cod
- Sql代码 CREATE TABLE test(a VARCHAR2( 20),b VARCHAR2 (20),c NUMBER,d VAR
- 1. Single array iteration>>> a = np.arange(6).reshape(2,3)>
- 最近刚学习数据库,首先是了解数据库是什么,数据库、数据表的基本操作,这就面临了一个问题,mysql的安装,我这里下载的是64位的,基于Win
- 1、确定服务器上的防火墙没有阻止 3306 端口 MySQL 默认的端口是 3306 ,需要确定防火墙没有阻止 3306 端口,否则远程是无
- 前言:Requests简介Requests 是使用Apache2 Licensed 许可证的 HTTP 库。用 Python 编写,真正的为
- 操作系统:win7 64位旗舰版mysql压缩包:mysql-5.7.11-winx64.zip1. 解压MySQL压缩包将下载的MySQL
- 一、视图的基本概念视图是用于查询的另外一种方式。 与实际的表不同,它是一个虚表;因此数据库中只存在视图的定义,而不存在视图中相对应的数据,数
- 本文实例讲述了Golang正整数指定规则排序算法问题。分享给大家供大家参考,具体如下:给定字符串内有很多正整数,要求对这些正整数进行排序,然
- 今天在做sql Server 2005的实验的时候碰到的问题,问题描述很清楚,怀疑是我以前给计算机修改了名称而导致的.可以用select @
- 在改进SQL Server 7.0系列所实现的安全机制的过程中,Microsoft建立了一种既灵活又强大的安全管理机制,它能够对用户访问SQ
- 问题你想将HTML或者XML实体如 &entity; 或 &#code; 替换为对应的文本。 再者,你需要转换文本 * 定的字
- PDOStatement::executePDOStatement::execute — 执行一条预处理语句(PHP 5 >= 5.1
- 前言最近在学习python 爬虫方面的知识,网上有一博客专栏专门写爬虫方面的,看到用urllib请求有道翻译接口获取翻译结果。发现接口变化很
- 什么是装饰器?装饰器(Decorator)相对简单,咱们先介绍它:“装饰器的功能是将被装饰的函数当作参数传递给与装饰器对应的函数(名称相同的