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 相关文章推荐
W3C Group的JavaScript1.8 新特性介绍
May 19 Javascript
JavaScript Event学习第二章 Event浏览器兼容性
Feb 07 Javascript
js获取URL的参数的方法(getQueryString)示例
Sep 29 Javascript
Javascript 按位取反运算符 (~)
Feb 04 Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 Javascript
JS深度拷贝Object Array实例分析
Mar 31 Javascript
JS全局变量和局部变量最新解析
Jun 24 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
Aug 02 Javascript
浅析vue component 组件使用
Mar 06 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
May 11 Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 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分页思路以及在ZF中的使用
2012/05/30 PHP
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
jqgrid 简单学习笔记
2011/05/03 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
深入浅出es6模板字符串
2017/08/26 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
Python set集合类型操作总结
2014/11/07 Python
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
师范生自荐信
2013/10/27 职场文书
自荐书格式
2013/12/01 职场文书
应届医学毕业生求职信分享
2013/12/02 职场文书
大学辅导员事迹材料
2014/02/05 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
三年级学生评语
2014/04/23 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
还款承诺书范本
2015/01/20 职场文书
太行山上观后感
2015/06/05 职场文书
财务管理制度范本
2015/08/04 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
Redis实现订单过期删除的方法步骤
2022/06/05 Redis
详解Spring Bean的配置方式与实例化
2022/06/10 Java/Android