jQuery实现锚点scoll效果实例分析
本文实例讲述了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程序设计有所帮助。
相关推荐
-
关于锚点跳转及jQuery下相关操作与插件
一.锚点跳转简介 锚点嘛,业余点的解释就是可以让页面定位到某个位置的点.在高度较高的页面中经常见到,例如,百度百科页面,<火影忍者>这个词条,结果就会看到如下的锚点列表: 点击其中一个链接,就会跳转到页面的相应位置.这就是锚点的作用之一.锚点还可以用在跳转到其他页面的相应位置,例如我的博客,点击博客首页文章下面的评论链接,则会跳转到文章的评论处. 起关键作用的就是链接地址后面跟着的#comments,见下图标示: 我知道的实现锚点跳转有两种方式,一种是a标签+name属性,还有一种就是使用标签
-
jQuery实现个性翻牌效果导航菜单的方法
本文实例讲述了jQuery实现个性翻牌效果导航菜单的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh
-
jQuery实现简单的间隔向上滚动效果
本文实例讲述了jQuery实现简单的间隔向上滚动效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <div id="broadcast" class="bar" name="giftactive"> <
-
用jquery修复在iframe下的页面锚点失效问题
应用场景是:iframe页面没有滚动条,在父窗体中出现滚动条,锚点标记就会失效,因为,锚点是根据当前窗口滚动条滚动窗口的,成为子窗体后没有了滚动条,自然不会滚动. 解决办法是:用js判断页面是否被嵌套,用js计算iframe在父窗体位置,锚点在firame中的位置,两者相加成为父窗体的滚动. 遇到问题:获取父窗体元素(因为有域限制,所有需要在网络环境下方位(即http://domain.com)):父窗体嵌套多个iframe,判断是否是当前iframe页面. 代码: 父窗体页面 index.ht
-
jQuery实现Div拖动+键盘控制综合效果的方法
本文实例讲述了jQuery实现Div拖动+键盘控制综合效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199
-
jquery根据锚点offset值实现动画切换
锚点相信大家都使用过吧!点击后僵硬的切换是不是很不爽呢? 下面分享一个小技巧,根据锚点offset值来实现动画切换 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml
-
jQuery 锚点跳转滚动条平滑滚动一句话代码
jQuery锚点跳转滚动条平滑滚动一句话代码 复制代码 代码如下: $("html,body").animate({scrollTop: $("#box").offset().top}, 1000); 一下是一些jquery的小技巧1. 控制编译结果 复制代码 代码如下: <script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></sc
-
jquery通过load获取文件的内容并跳到锚点的方法
本文实例讲述了jquery通过load获取文件的内容并跳到锚点的方法.分享给大家供大家参考.具体分析如下: 昨天在做一个类似于帮助文档型的页面,左边是导航,右边显示的是内容.本来打算右边内容显示区域用iframe来实现,但由于要做iframe的适应高度所以就换了一种方法,使用jquery的ajax中的load方法. 获取远程文件中的内容很容易实现,直接使用jquery的load方法: $("#content").load("xxx.aspx") 这样很容易将xxx.
-
jquery如何实现锚点链接之间的平滑滚动
复制代码 代码如下: $('a[href*=#]').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var $target = $(this.hash); $target = $target.length && $target || $('[name
-
JQuery 实现在同一页面锚点链接之间的平滑滚动
web开发前端一直用JQuery ,真正接触了才体会到,JQuery 原来比我想象的要强大的多,也可能比我体会到的还要强大的多,特别是兼容性那个好,于是把一些好玩的,酷炫的,可以代替 JS 的,统统给用上了. 从 JQuery 引入今天的正题,用 JQuery 实现锚点链接之间的平滑滚动.以前介绍过一个用 JS 实现的页面锚点跳转缓冲特效,效果相当不错,可以在同一页面的锚点链接之间实现平滑的滚动,但是 JS 代码相对来说比较冗长,现在好了,只要已经加载了 JQuery,我们就可以用较为简短的代码
随机推荐
- 使用python实现省市三级菜单效果
- linux 中的gzip命令
- JavaScript浏览器选项卡效果
- VBS教程:方法-Move 方法
- C++统计软件使用时间代码示例
- IOS实现验证码倒计时功能(一)
- 在Oracle数据库中同时更新两张表的简单方法
- 浅谈c/c++中使用指针需要注意的问题
- Mysql修改datadir导致无法启动问题解决方法
- CSS 浏览器的等宽空格问题解决
- Android状态栏白底黑字的示例代码
- Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
- Ubuntu 16.04安装搜狗拼音输入法错误问题的解决方法
- JS的反射问题
- javascript 命名规则 变量命名规则
- 登陆FTP服务器feat命令错误的解决方法[登陆后不能得到文件列表的解决办法]
- Android自定义ListView实现仿QQ可拖拽列表功能
- java异常与错误处理基本知识
- Python下载指定页面上图片的方法
- python通过exifread模块获得图片exif信息的方法