js操作滚动条事件实例

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

之前一直很纳闷，如何监视滚动条的事件，今天终于有点明白了。

下边代码，是监听滚动条只要移动，下方的返回顶部的div显示与隐藏的代码

window.onscroll = function () {

var t = document.documentElement.scrollTop || document.body.scrollTop;

if (t > 0) {

$(".cbbfixed").css("bottom", "10px");

} else {

$(".cbbfixed").css("bottom", "-85px");

}

注：

t：滚动条距离top端的距离

t>0,即滚动条一旦滚动，立即执行if（）语句，else（）中的代码是，滚动条到到top处时，返回顶部的div隐藏

返回顶部按钮的点击操作：

$("#cgotop").click(function(){

$('body,html').animate({ scrollTop: 0 }, 100);

// document.body.scrollTop = 0;

return false;

});

补充：

1、监听某个元素的滚动条事件

1	`$(selector).scroll(function(){.......});`

2.获取滚动条滚动的距离

1 2	`$(selector).scrollTop();` `$(selector).scrollLefft();`

PS：这里再为大家推荐一款关于JS事件的在线查询工具，归纳总结了JS常用的事件类型与函数功能：

javascript事件与功能说明大全：

http://tools.jb51.net/table/javascript_event

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

如对本文有疑问，请提交到交流社区，广大热心网友会为你解答！！点击进入社区

js操作滚动条事件实例相关推荐

JS网页滚动条滚动事件实例分析
js网页滚动条滚动事件的用法,在javascript中window.onscroll监控滚动条滚动事件的相关技巧本文实例讲述了js网页滚动条滚动事件用法,具体分析如下: 在做js返回顶部的效果时,要 ...
html自定义datajs,科技常识：HTML5的自定义属性data-*详细介绍和JS操作实例
今天小编跟大家讲解下有关HTML5的自定义属性data-*详细介绍和JS操作实例 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5的自定义属性data-*详细介绍和JS操作实例的 ...
JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前言絮叨絮叨这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
php接收键盘事件,js获取键盘事件的方法实例
本文主要和大家分享js获取键盘事件的方法实例,希望能帮助到大家. document.οnkeydοwn=function(event){ var e = event || window.event | ...
js hover 触发事件_为什么说JS的DOM操作很耗性能
想问这样的问题,其实是自己心中没有个谱,一直用 js 计算性能来衡量浏览器dom 操作性能.js性能和浏览器性能其实是两码事. 这个问题很抽象,它里面涉及挺多个小的知识点. 重申一点,js 操作 D ...
js控制右侧滚动条事件
js控制右侧滚动条事件 css代码 <style>*{margin: 0;padding: 0;}body{height: 3000px;}.top{background-color: t ...
js day04DOM节点操作、事件对象与BOM
DOM节点操作.事件对象与BOM V1.2 一.复习提问  js中目前学到的事件由哪些  如何阻止a链接  设置表单例如disabled selected checked的正确方式是什么?  ...
JS 监听滚动条事件
JS 监听滚动条事件获取滚动条位置代码监听滚动条方法效果获取滚动条位置代码 /** * 获取滚动条位置 */ function getScrollTop() {var scrollPos;if ...
用JS基础写一个简单的滚动条事件
滚动条事件,顾名思义,就是创建一个可以一直下拉的滚动条. 用的场景多用于商品的推荐. 首先要在CSS里创建一个高度(相关的也可以) <style>body{padding-bottom: ...

js操作滚动条事件实例

js操作滚动条事件实例相关推荐

最新文章

热门文章