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 相关文章推荐
js 全兼容可高亮二级缓冲折叠菜单
Jun 04 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
Oct 29 Javascript
jQuery $.get 的妙用 访问本地文本文件
Jul 12 Javascript
jquery解决图片路径不存在执行替换路径
Feb 06 Javascript
jquery实现metro效果示例代码
Sep 06 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
elementUI 设置input的只读或禁用的方法
Oct 30 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
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
PHP4(windows版本)中的COM函数
2006/10/09 PHP
基于pear auth实现登录验证
2010/02/26 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
JSONP跨域请求
2017/03/02 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
实例讲解React 组件生命周期
2020/07/08 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
布同 统计英文单词的个数的python代码
2011/03/13 Python
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
python 读写中文json的实例详解
2017/10/29 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
Python用input输入列表的实例代码
2020/02/07 Python
QML实现钟表效果
2020/06/02 Python
python爬取招聘要求等信息实例
2020/11/20 Python
甜品店创业计划书
2014/08/14 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
实习协议书
2015/01/27 职场文书
质量保证书格式模板
2015/02/27 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
文艺节目主持词
2015/07/06 职场文书
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS