脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js操作滚动条事件

js操作滚动条事件实例

 更新时间：2015年01月29日 16:35:54   投稿：shichen2014  
这篇文章主要介绍了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); 
 return false; 
});

补充：

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

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

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

$(selector).scrollTop();
$(selector).scrollLefft();

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

javascript事件与功能说明大全：

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

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

您可能感兴趣的文章:

相关文章

  • js 判断一个数字是不是2的n次方幂的实例

    js 判断一个数字是不是2的n次方幂的实例

    下面小编就为大家分享一篇js 判断一个数字是不是2的n次方幂的实例，具有很好的参考价值，希望对大家有所帮助
    2017-11-11
  • js解决弹窗问题实现班级跳转DIV示例

    js解决弹窗问题实现班级跳转DIV示例

    本文为大家介绍下js如何解决弹窗问题实现班级跳转DIV，具体示例如下，感兴趣的朋友可以参考下
    2014-01-01
  • JavaScript之创意时钟项目(实例讲解)

    JavaScript之创意时钟项目(实例讲解)

    下面小编就为大家带来一篇JavaScript之创意时钟项目。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • JS+ACTIVEX实现网页选择本地目录路径对话框

    JS+ACTIVEX实现网页选择本地目录路径对话框

    使用ACTIVEX对象遍历本地磁盘和目录,只需网页启用相关ACTIVEX的INTERNET选项即可实现路径选择对话框，感兴趣的你可以参考下哈希望可以帮助到你
    2013-03-03
  • 项目中常用的JS方法整理

    项目中常用的JS方法整理

    这里给大家整理的是本人上个项目中所用到的js方法，都是些非常常用的javascript方法，相信小伙伴们也能经常用到，这里整理出来分享给大家。
    2015-01-01
  • JavaScript实现刮刮乐效果

    JavaScript实现刮刮乐效果

    这篇文章主要为大家详细介绍了JavaScript实现刮刮乐效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • 详解JavaScript如何实现四种常用排序

    详解JavaScript如何实现四种常用排序

    这篇文章主要为大家介绍了如何利用JavaScript实现四个常用的排序：插入排序、交换排序、选择排序和归并排序，文中利用动图详细介绍了实现过程，需要的可以参考一下
    2022-02-02
  • layui实现数据分页功能

    layui实现数据分页功能

    这篇文章主要为大家详细介绍了layui实现数据分页功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-07-07
  • JavaScript汉诺塔问题解决方法

    JavaScript汉诺塔问题解决方法

    这篇文章主要介绍了JavaScript汉诺塔问题解决方法,涉及javascript递归调用操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • Prototype框架详解

    Prototype框架详解

    Prototype是一个JavaScript框架，旨在简化动态Web应用程序的开发。原型被称为作为一个单一的文件分发的prototype.js，本文给大家介绍prototype框架，感兴趣的朋友一起学习吧
    2015-11-11

最新评论