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 相关文章推荐
Prototype1.6 JS 官方下载地址
Nov 30 Javascript
js网页侧边随页面滚动广告效果实现
Apr 14 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 Javascript
javascript父、子页面交互技巧总结
Aug 08 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
vue页面使用阿里oss上传功能的实例(二)
Aug 09 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
JavaScript实现缓动动画
Nov 25 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实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
基于jquery的多功能软键盘插件
2012/07/25 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
python 把数据 json格式输出的实例代码
2016/10/31 Python
Python set常用操作函数集锦
2017/11/15 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
wxPython实现绘图小例子
2019/11/19 Python
Pytorch释放显存占用方式
2020/01/13 Python
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
htnl5利用svg页面高斯模糊的方法
2018/07/20 HTML / CSS
消防应急演练方案
2014/02/12 职场文书
开业庆典主持词
2014/03/21 职场文书
应届毕业生自荐书
2014/06/18 职场文书
实习科室评语
2015/01/04 职场文书
幼师求职自荐信
2015/03/26 职场文书
优质护理心得体会
2016/01/22 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS