jquery怎么修改滚动条位置
2022-05-23 16:26:55
修改方法:1、用scrollLeft(),可设置水平滚动条的位置,语法“$("滚动条元素").scrollLeft(位置值)”;2、用scrollTop(),可设置垂直滚动条位置,语法“$("滚动条元素").scrollTop(位置值)”。
本教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑。
jquery提供了两种方法可直接修改滚动条位置
scrollLeft()
scrollTop()
1、使用scrollLeft()
scrollLeft() 可以设置匹配元素相对滚动条左侧的偏移,即水平滚动条的位置。
滚动条的水平位置指的是从其左侧滚动过的像素数。当滚动条位于最左侧时,位置是 0。
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function() { $("button").click(function() { $("p").scrollLeft(100); }); }); </script> </head> <body> <p style="border:1px solid black;width:100px;height:130px;overflow:auto"> The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis. </p><br> <button>水平滚动条的位置设置为100 px</button> </body> </html>
2、使用scrollTop()
scrollTop()可设置匹配元素相对滚动条顶部的偏移,即垂直滚动条的位置。
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function() { $("button").click(function() { $("p").scrollTop(100); }); }); </script> </head> <body> <p style="border:1px solid black;width:100px;height:150px;overflow:auto"> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p><br> <button>垂直滚动条的位置设置为100px</button> </body> </html>
【推荐学习:jQuery视频教程、web前端视频】
以上就是jquery怎么修改滚动条位置的详细内容,更多请关注dnjidi.com其它相关文章!
相关阅读
- h5和css3有哪些新特性
- css换行代码是什么
- css使图片居中的方法有哪些
- 巧用css将背景图像固定在视口
- 巧用css规定背景绘制区域
- 一招搞定css相对原点定位背景图片
- 如何使用css设置背景图的重复与否
- 教你一招搞定css背景图的大小
- 一招搞定css定位元素的背景图像
- css如何定义网格线大小
- css如何设置指定网格的大小和位置
- 怎么实现水印?浅析水印实现的几种方式
- 如何使用JavaScript比较两个日期
- 如何使用前端三剑客创建漂亮的倒计时效果
- javascript的变量是什么
- javascript中变量的命名有什么要求
- javascript是不是面向对象语言
- vue和vuejs一样吗