广

JavaScript

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言
  • 编程开发

    javascript操作滚动条事件实例

    2018-04-07 07:50:16 次阅读 稿源:互联网
    零七广告

    本文实例讲述了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();

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

    零七网部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与零七网进行文章共享合作。

    零七广告
    零七广告
    零七广告
    零七广告