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
  • 43651

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

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

jquery点击滑动到某个位置

原文链接:http://caibaojian.com/jquery-scrollto.html 比较常用的一个功能,只需要一个简单的函数就可以滑动到任意你需要的地方,默认点击之后是返回顶部。...
  • simplty
  • simplty
  • 2016年08月15日 15:58
  • 1366

Javascript自动将页面滚动到指定位置

昨天一个朋友问我如何在页面加载完成后,自动将页面定位到某个位置,当时有些忙,就没来得及解决。殊不知今天在做PHP教程的项目中也有了同样的需求:为了页面美观,需要只显示用户从楼盘相册点击后进入的相册幻灯...

js 滚动/跳转页面到指定位置

要解决两个需求: 一个是从A页面跳到B页面,滚动到页面的任何地方; 第二个是在B页面内部点击某个元素,滚动到页面的任何地方; 怎么解决啊?很简单,当然是用锚点。 首先在A页面创...
  • jodan179
  • jodan179
  • 2013年07月18日 11:04
  • 25991

HTML+JS之点击按钮滚动到页面指定位置

在建站的过程中,我们难免遇到篇幅比较长的页面,这时候想看页面某个部分,如果是纯手动滚动那就略显笨拙 幸好JQ提供一个直接获取某盒子top位置的方法 offset() 该方法包含两个参数  top与l...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

jquery滚动条滚动的指定位置

.div_center为滚动条区域,滚动条滚动到spann的高度,slow速度 可以为数字  $(".div_center").animate({scrollTop:$(spann).o...

页面滚动到指定位置

点击某个div ,页面滚动到指定位置 回到顶部 scrolltop = 0; 结合获取到某个div的offset().top;可以使某个 div 滚动到顶部...
  • lidog
  • lidog
  • 2017年05月21日 00:07
  • 700

jQuery滚动到页面指定位置

在前端的页面开发中,经常会碰到页面跳转问题,这个跳转指的是页面内部跳转到指定位置,通常是在有滚动条的情况下,网上介绍的方法很多,本文主要是介绍jQuery函数中的一个小trick,.focus()函数...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery点击滚动条滑动到某个位置
举报原因:
原因补充:

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