jquery点击滚动条滑动到某个位置

原创 2015年07月08日 16:19:25

对于锚点的平滑跳转,我觉得要谨慎使用,在个人站点或是这个效果含有功能提示可以用一用,在一般的商业性质的网站上,权衡来讲,不用更好,当然,这只是我的个人意见。jQuery库已经为我们做了很多的工作了,所以,在jQuery下实现锚点的平滑跳转是简单轻松的。例如,我们要让页面平滑滚动到一个id为box的元素处,则jQuery代码只要一句话,如下:

$("html,body").animate({scrollTop: $("#box").offset().top}, 1000);

其中animate为jQuery自定义动画方法,$(“#box”).offset().top表示id为box的jQuery对象距离页面顶部的偏移值,1000表示平滑动画执行的时间为1000毫秒,也就是1秒。

为了直观的表示效果,我做个个简单的demo页面。您可以狠狠地点击这里:锚点平滑跳转demo

点击下图所示文字链接,就可以看到平滑跳转效果了:

平滑效果文字链接 张鑫旭-鑫空间-鑫生活

JavaScript 滚动页面到指定元素位置

页面评论功能,当评论较多时,有时需要滚动到评论头部。可以使用scrollTop方法,加上一点延时动画(animate),可访问在线演示,代码大体如下: $(docu...
  • iefreer
  • iefreer
  • 2015年07月17日 17:42
  • 51732

jquery 滚动到指定位置触发动画

jquery 滚动到指定位置触发动画 sas *{ margin:0px; padding:0px;} .gs{ position:relative; top:800px; backg...
  • bzxcl
  • bzxcl
  • 2016年03月24日 17:20
  • 6039

jQuery滚动到页面指定位置

在前端的页面开发中,经常会碰到页面跳转问题,这个跳转指的是页面内部跳转到指定位置,通常是在有滚动条的情况下,网上介绍的方法很多,本文主要是介绍jQuery函数中的一个小trick,.focus()函数...
  • Quincuntial
  • Quincuntial
  • 2016年09月08日 12:58
  • 1523

ScrollTop滚动 jquery自定义滚动到指定位置

  • 2014年06月12日 14:25
  • 12KB
  • 下载

利用jquery制作滚动到指定位置触发动画

利用jquery制作滚动到指定位置触发动画 *{ margin:0px; padding:0px;} .gs{ position:relative; top:800px;  background-...
  • yaoyyl
  • yaoyyl
  • 2016年05月13日 17:09
  • 5506

jquery中点击某元素后滚动条滚动到某元素位置或底部

//首先获取文档对象 var target; if(document.documentElement.scrollTop){ target=$("html"); }else{ targ...
  • euxil97
  • euxil97
  • 2017年08月14日 20:16
  • 756

jQuery实现定位滚动条位置

scrollTop() 方法scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置
  • duola8789
  • duola8789
  • 2017年11月08日 20:32
  • 360

jquery滚动条滚动的指定位置

.div_center为滚动条区域,滚动条滚动到spann的高度,slow速度 可以为数字  $(".div_center").animate({scrollTop:$(spann).o...
  • u014227715
  • u014227715
  • 2016年06月29日 12:47
  • 3294

jquery定位div中的滚动条

将滚动条定位到某个某个元素集合的最后一个元素的第一个子元素div的位置。 function divTopLastScroll(parScor,listDiv) { //parScor:包含滚动条的外...
  • sui_s
  • sui_s
  • 2016年01月22日 15:52
  • 1238

点击导航,滑动到网页中的指定位置(JS实现滑动锚点定位)

在一个网页页面中,可能会分为很多的模块内容,当我点击导航栏的某一项时,希望显示对应的内容,例如,点击下图导航中的报告服务后,希望网页滑动到 “报告服务” 的模块,点击城市品牌滑动到“城市品牌”的模块。...
  • wang1006008051
  • wang1006008051
  • 2018年01月10日 17:27
  • 205
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery点击滚动条滑动到某个位置
举报原因:
原因补充:

(最多只允许输入30个字)