$('.nav-jump').click(function()
{
$('html,body').animate(
{
scrollTop:$($.attr(this, 'href')).offset().top
}, 800);
});

该代码实现了 所以带.nav-jump class 的<a>标签在点击时能够平滑跳转至 链接所指的页内部分。

调用:

<a class="nav-jump" href="#part-1"><p>描述</p></a>

JQuery 实现 锚点跳转的更多相关文章

  1. jQuery实现锚点跳转(就一行代码)

    /* 锚点跳转 */ function anchor(p,fn) { $("html,body").animate({ scrollTop: $("#" + p ...

  2. jQuery之锚点带动画跳转特效

    背景图片为金木研,这是我最爱的一张图. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  3. jquery 在页面上根据ID定位(jQuery锚点跳转及相关操作) 经典

    1.锚点跳转简介 Edit 锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到.比如百度的百科页面,wiki中的page内容. 我知道实现锚点的跳转有两种形式,一种是a标签+nam ...

  4. jQuery任意标签锚点跳转插件

    // 任意锚点平滑跳转插件// 2010-07-15 v1.0(function($){ $.fn.zxxAnchor = function(options){ var defaults = { ie ...

  5. jquery 在页面上根据ID定位(jQuery锚点跳转及相关操作)

    JQuery下锚点的平滑跳转 对于锚点的平滑跳转,在一般的商业性质的网站上,权衡来说,要谨慎使用. 例如:让页面平滑滚动到一个id为box的元素处,则JQuery代码只要一句话,关键位置 如下: $( ...

  6. 各种HTML锚点跳转方式

    1 js控制锚点跳转 <a name="anchor"></a> location.hash="anchor"; 不只有a其他元素也可以 ...

  7. 基于jquery的锚点滚动插件(百度百科效果) anchorScroll.js

    1.插进使用场景 请打开https://baike.baidu.com/item/%E6%97%A5%E6%9C%AC%E5%8A%A8%E7%94%BB#hotspotmining,查看百度百科页面 ...

  8. html锚点的作用和js选项卡锚点跳转的使用

    location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url.而location. ...

  9. a 锚点跳转滑动效果

    点击a链接时,跳转到相应id的位置处,有一个滑动效果. <a href="#my">我是跳转到div</a><div id="my" ...

随机推荐

  1. [mysql][【优化集合】mysql数据库优化集合

    三个层面: 1.系统层面 2.mysql配置参数 3.sql语句优化 =========================================================== 一.系统层 ...

  2. bzoj 1135 [POI2009]Lyz 线段树+hall定理

    1135: [POI2009]Lyz Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 573  Solved: 280[Submit][Status][ ...

  3. 有向图的强联通分量 Tarjan算法模板

    //白书 321页 #include<iostream> #include<cstdio> #include<cstring> #include<vector ...

  4. layer 限定时间消失

    默认tips层几秒后自动关闭.请问如何实现类似页面层时,点击页面层外部遮罩手动关闭的效果? 下面我加了time: 20000 时间控制在20秒后自动关闭,但是显得比较呆板,不如用户手动点击关闭来的灵活 ...

  5. 使用freemarker生成word、html时图片显示问题

    使用freemarker生成word.html时图片显示问题 博客分类: Java 使用freemarker生成word时图片显示问题使用freemarker生成html时图片显示问题使用iText生 ...

  6. 编辑器vi命令

    代码: # vi + 文件名 //将光标放在文档最下面 进入编辑器后: i:插入 x:删除 w:保存 q:退出不保存 q!:强制退出不保存 wq:保存并退出

  7. Enterprise Architect 13 : 将绘制的图形导出成图片 或者 拷贝到剪贴板中

    使用Enterprise Architect 13 工具画类图.包图.需求图.状态图.时序图什么的导出成图片格式 或者拷贝到剪贴版,步骤如下: Publish -> Save Image -&g ...

  8. Windows、Linux及Mac查看端口和杀死进程

    本文介绍如何在Windows.Linux及Mac下查看端口和杀死进程. Windows下查看端口和杀死进程 查看占用端口号的进程号:netstat –ano | findstr "指定端口号 ...

  9. 简单的异步HTTP服务端和客户端

    /// <summary> /// 异步Http服务器 /// </summary> class AsyncHttpServer { readonly HttpListener ...

  10. Bat 命令相关

    1. bat 里面怎么sleep 等待: ping 127.0.0.1 -n 2000 > nul 2. net use 建立映射: net use Y: \\172.16.10.240\Inf ...