脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js scrollTop()方法和scroll()方法

js中scrollTop()方法和scroll()方法用法示例

 更新时间：2016年10月03日 11:09:30   作者：kp12345  
这篇文章主要介绍了js中scrollTop()方法和scroll()方法用法,结合实例形式分析了scrollTop()方法和scroll()方法滚动操作的用法与相关操作技巧,需要的朋友可以参考下

本文实例讲述了js中scrollTop()方法和scroll()方法用法。分享给大家供大家参考，具体如下：

设置滚动条据顶部的高度：

$("div").scrollTop(100); //把 scroll top offset 设置为 100px

获得滚动条的高度：

$("div").scrollTop()；//获得 scroll top offset

触发滚动事件

$(selector).scroll()

将函数绑定到滚动事件中：

$(selector).scroll(function)

监听滚动事件，判断当滚动到距离顶部700px时，将其position改为fixed：

$(window).scroll(function(){
var $scroll_height = $(".gray").scrollTop();
if($scroll_height > 700){
$(".hot-nav").addClass("fix-nav");
} else {
$(".hot-nav").removeClass("fix-nav");
}
})

这是jquery中的用法，

offset() 获取匹配元素在当前视口的相对偏移。

返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。

top:$(this).offset().top+25+"px"

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

您可能感兴趣的文章:

相关文章

  • sso跨域写cookie的一段js脚本(推荐)

    sso跨域写cookie的一段js脚本(推荐)

    下面小编就为大家带来一篇sso跨域写cookie的一段js脚本(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • js如何构造elementUI树状菜单的数据结构详解

    js如何构造elementUI树状菜单的数据结构详解

    由于业务需要，要求实现树形菜单，且菜单数据由后台返回，下面这篇文章主要给大家介绍了关于js如何构造elementUI树状菜单的数据结构的相关资料,需要的朋友可以参考下
    2021-05-05
  • 一个javascript参数的小问题

    一个javascript参数的小问题

    2008-03-03
  • javascript中拼接HTML字符串的最快、最好的方法

    javascript中拼接HTML字符串的最快、最好的方法

    这篇文章主要介绍了javascript中拼接HTML字符串的最快、最好的方法，本文共计介绍了3种方法,并对3个各自做了浏览器速度测试,需要的朋友可以参考下
    2014-06-06
  • JavaScript作用域链示例分享

    JavaScript作用域链示例分享

    作用域是JavaScript最重要的概念之一，想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。今天这篇文章对JavaScript作用域链作简单的介绍，希望能帮助大家更好的学习JavaScript。
    2014-05-05
  • 在JS中如何使用css变量详解

    在JS中如何使用css变量详解

    这篇文章主要给大家介绍了关于如何在JS中如何使用css变量以及export之javascript关键字的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2021-09-09
  • js中根据字数截取字符串，不能截断url

    js中根据字数截取字符串，不能截断url

    给一个文字，对输出的文字进行截取，保留400个字符,其中对url的保留比较麻烦，尤其是有两个相同url时不能采用indexOf获取其字符位置
    2012-01-01
  • 微信小程序实现留言板（Storage）

    微信小程序实现留言板（Storage）

    这篇文章主要为大家详细介绍了微信小程序实现留言板，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-11-11
  • js表格分页实现代码

    js表格分页实现代码

    js表格分页实现代码，需要的朋友可以参考下。
    2009-09-09
  • JS设计模式之中介者模式使用方法详解

    JS设计模式之中介者模式使用方法详解

    JavaScript中介者模式是一种行为型设计模式,用于降低多个对象之间的耦合性,在中介者模式中,多个对象之间不直接相互通信,而是通过中介者进行通信, 本文就来给大家详细的介绍一下JS设计模式之中介者模式使用方法,需要的朋友可以参考下
    2023-08-08

最新评论