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 相关文章推荐
jquery text()要注意啦
Oct 30 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
JS中产生标识符方式的演变
Jun 12 Javascript
jQuery判断是否存在滚动条的简单方法
Sep 17 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
element ui table(表格)实现点击一行展开功能
Dec 04 Javascript
webpack结合express实现自动刷新的方法
May 07 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 Javascript
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中使用Imagick实现各种图片效果实例
2015/01/21 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
javascript URL锚点取值方法
2009/02/25 Javascript
js 学习笔记(三)
2009/12/29 Javascript
jquery的Theme和Theme Switcher使用小结
2010/09/08 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
JS:window.onload的使用介绍
2013/11/13 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
公司担保书格式范文
2014/05/12 职场文书
考试保密承诺书
2014/08/30 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang
浅谈Python类的单继承相关知识
2021/05/12 Python