使用js或者jq设置滚动条滚动位置

js原生方法scrollTo

js原生设置x轴和y轴就一个方法,首先获取到dom对象,然后设置位置即可,

dom.scrollTo(x,y); //x为水平方向的滚动条位置,y为垂直方向的滚动条位置

如果只想设置y轴的滚动条位置,首先需要获取到当前x轴的滚动条位置,然后再设置y轴,如:

dom.scrollTo(dom.scrollLeft, 100); //设置y轴滚动一百像素

dom.scrollTo(100, dom.scrollTop); //设置x轴滚动一百像素

jq方法

jq的相关方法为,设置x轴

$("#id").scrollTop(100);  //设置y轴滚动条位置为滚动100像素的位置

$("#id").scrollTop(); //返回当前滚动条y轴的滚动的位置

设置y轴

$("#id").scrollLeft(100);  //设置x轴滚动条位置为滚动100像素的位置

$("#id").scrollLeftp(); //返回当前滚动条x轴的滚动的位置
  • 2
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
当鼠标在页面上按下时,可以使用jQuery中的鼠标按下事件(mousedown event)来监听。一旦鼠标按下,就可以执行代码来实现自动滚动条流动到当前位置。 首先,我们需要获取当前滚动条位置。可以使用jQuery的scrollTop()方法来获取垂直滚动条位置,或者使用scrollLeft()方法获取水平滚动条位置。 接下来,我们可以使用animate()方法来创建动画效果,使滚动条平滑流动到当前位置。在animate()方法中,我们可以设置scrollTop或scrollLeft属性的值为当前滚动条位置,从而实现流动效果。 最后,我们将这段代码绑定在鼠标按下事件的回调函数中,以便在鼠标按下时执行。具体代码如下: ```javascript $(document).mousedown(function() { var currentScrollTop = $(window).scrollTop(); // 获取当前垂直滚动条位置 $('html, body').animate({ scrollTop: currentScrollTop }, 500); // 将滚动条流动到当前位置,动画持续时间为500毫秒 }); ``` 在上述代码中,我们通过监听整个文档的鼠标按下事件来实现滚动条的自动流动。当鼠标按下时,获取当前滚动条位置,并使用animate()方法创建动画效果,将滚动条平滑流动到当前位置。 请注意,上述代码假设你使用的是最新版本的jQuery,并且已经引入了jQuery库。如果需要适配旧版本的jQuery或者其他JavaScript库,请根据实际情况进行修改和调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值