jQuery实现锚点scoll效果实例分析


Posted in Javascript onMarch 10, 2015

本文实例讲述了jQuery实现锚点scoll效果的方法。分享给大家供大家参考。具体实现方法如下:

$('a[href*=#]').click(function() {

   if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')

   && location.hostname == this.hostname) {

     var $target = $(this.hash);

     $target = $target.length && $target

     || $('[name=' + this.hash.slice(1) +']');

     if ($target.length) {

       var targetOffset = $target.offset().top;

       var obj = document.documentElement; 

     if (jQuery.browser.safari) 

           obj = document.body

    if (jQuery.browser.msie) 

           obj = 'html';

      $(obj).animate({scrollTop: targetOffset}, 1000);

       return false;

     }

   }

});

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

Javascript 相关文章推荐
Javascript技术技巧大全(五)
Jan 22 Javascript
List Installed Hot Fixes
Jun 12 Javascript
JavaScript继承方式实例
Oct 29 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 Javascript
jquery easyui validatebox remote的使用详解
Nov 09 Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 Javascript
详解vue中移动端自适应方案
May 05 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 Javascript
使用jQuery实现购物车
Oct 29 jQuery
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 #Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
Mar 10 #Javascript
js控制页面的全屏展示和退出全屏显示的方法
Mar 10 #Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 #Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 #Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 #Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 #Javascript
You might like
PHP文件上传实例详解!!!
2007/01/02 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
Django自定义用户认证示例详解
2018/03/14 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
python人民币小写转大写辅助工具
2018/06/20 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
美国牛仔品牌:True Religion
2018/11/16 全球购物
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
高级Java程序员面试要点
2013/08/02 面试题
医学护理毕业生自荐信
2013/11/07 职场文书
公司授权委托书样本
2014/09/15 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
教师节寄语2015
2015/03/23 职场文书
平凡的世界读书笔记
2015/06/25 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
理解python中装饰器的作用
2021/07/21 Python
Vue鼠标滚轮滚动切换路由效果的实现方法
2021/08/04 Vue.js