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根据锚点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实现简单的间隔向上滚动效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <div id="broadcast" class="bar" name="giftactive"> <
-
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通过load获取文件的内容并跳到锚点的方法
本文实例讲述了jquery通过load获取文件的内容并跳到锚点的方法.分享给大家供大家参考.具体分析如下: 昨天在做一个类似于帮助文档型的页面,左边是导航,右边显示的是内容.本来打算右边内容显示区域用iframe来实现,但由于要做iframe的适应高度所以就换了一种方法,使用jquery的ajax中的load方法. 获取远程文件中的内容很容易实现,直接使用jquery的load方法: $("#content").load("xxx.aspx") 这样很容易将xxx.
-
JQuery 实现在同一页面锚点链接之间的平滑滚动
web开发前端一直用JQuery ,真正接触了才体会到,JQuery 原来比我想象的要强大的多,也可能比我体会到的还要强大的多,特别是兼容性那个好,于是把一些好玩的,酷炫的,可以代替 JS 的,统统给用上了. 从 JQuery 引入今天的正题,用 JQuery 实现锚点链接之间的平滑滚动.以前介绍过一个用 JS 实现的页面锚点跳转缓冲特效,效果相当不错,可以在同一页面的锚点链接之间实现平滑的滚动,但是 JS 代码相对来说比较冗长,现在好了,只要已经加载了 JQuery,我们就可以用较为简短的代码
-
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修复在iframe下的页面锚点失效问题
应用场景是:iframe页面没有滚动条,在父窗体中出现滚动条,锚点标记就会失效,因为,锚点是根据当前窗口滚动条滚动窗口的,成为子窗体后没有了滚动条,自然不会滚动. 解决办法是:用js判断页面是否被嵌套,用js计算iframe在父窗体位置,锚点在firame中的位置,两者相加成为父窗体的滚动. 遇到问题:获取父窗体元素(因为有域限制,所有需要在网络环境下方位(即http://domain.com)):父窗体嵌套多个iframe,判断是否是当前iframe页面. 代码: 父窗体页面 index.ht
-
关于锚点跳转及jQuery下相关操作与插件
一.锚点跳转简介 锚点嘛,业余点的解释就是可以让页面定位到某个位置的点.在高度较高的页面中经常见到,例如,百度百科页面,<火影忍者>这个词条,结果就会看到如下的锚点列表: 点击其中一个链接,就会跳转到页面的相应位置.这就是锚点的作用之一.锚点还可以用在跳转到其他页面的相应位置,例如我的博客,点击博客首页文章下面的评论链接,则会跳转到文章的评论处. 起关键作用的就是链接地址后面跟着的#comments,见下图标示: 我知道的实现锚点跳转有两种方式,一种是a标签+name属性,还有一种就是使用标签
-
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实现个性翻牌效果导航菜单的方法
本文实例讲述了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
随机推荐
- js的alert弹出框出现乱码解决方案
- JS检测输入字符是否包含非法字符的示例代码
- ASP.NET MVC使用Ajax的辅助的解决方法
- DOM基础教程之使用DOM控制表单
- 12个非常实用的JavaScript小技巧【推荐】
- PHP开发中常用的字符串操作函数
- 在Django中创建动态视图的教程
- Python while、for、生成器、列表推导等语句的执行效率测试
- jsp中点击图片弹出文件上传界面及预览功能的实现
- ASP.NET中JQuery+AJAX调用后台
- Linux命令每天必学(55)之traceroute命令
- mysql 5.7.10 winx64安装配置方法图文教程(win10)
- Linux 连续执行多条命令的方法(推荐)
- Downplus 2.0关于使用迅雷快车链接的说明
- Linux使用libnet实现ARP攻击脚本原理分析以防被攻击
- java对象类型转换和多态性(实例讲解)
- Java多线程实现聊天客户端和服务器
- C++中的构造函数与析造函数详解
- C#实现通过程序自动抓取远程Web网页信息的代码
- Android获取手机联系人电话号码并返回结果