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如何给<textarea></textarea>赋值
Apr 20 Javascript
jQuery 页面 Mask实现代码
Jan 09 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
Mar 25 Javascript
JavaScript动态修改背景颜色的方法
Apr 16 Javascript
js中 javascript:void(0) 用法详解
Aug 11 Javascript
全面详细的jQuery常见开发技巧手册
Feb 21 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
深入理解Angular4订阅(Subscribe)与取消
Nov 22 Javascript
vue2.0+koa2+mongodb实现注册登录
Apr 10 Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 Javascript
vue初始化动画加载的实例
Sep 01 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下把数组保存为文件格式的实例应用
2010/02/08 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
cakephp常见知识点汇总
2017/02/24 PHP
php+jQuery实现的三级导航栏下拉菜单显示效果
2017/08/10 PHP
JavaScript 解析读取XML文档 实例代码
2009/07/07 Javascript
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
js分页工具实例
2015/01/28 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
Ionic快速安装教程
2016/06/03 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
python聊天程序实例代码分享
2013/11/18 Python
python list是否包含另一个list所有元素的实例
2018/05/04 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
Python+OpenCV图像处理——实现直线检测
2020/10/23 Python
解决pytorch 的state_dict()拷贝问题
2021/03/03 Python
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
应届毕业生求职信范文分享
2013/12/26 职场文书
大学生职业生涯规划范文
2014/01/08 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript