$('.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. PHP 数据库防止攻击

    定义和用法 mysql_real_escape_string() 函数转义 SQL 语句中使用的字符串中的特殊字符. 下列字符受影响: \x00 \n \r \ ' " \x1a 如果成功, ...

  2. Eclipse配置web开发环境

    eclipse的web配置: eclipse:Eclipse Java EE IDE for Web Developers. Version: Helios Service Release 1 下载地 ...

  3. 如何使用Navicat连接Oracle

    1.Navicat连接Oracle,需要使用OCI库.因此先要安装Oracle提供的客户端instantclient-basic, 请注意,32位的Navicat需要下载配置32位的instantcl ...

  4. hadoop压缩和解压

    最近有一个hadoop集群上的备份需求.源文件有几百G,如果直接复制太占用磁盘空间.将文件从hadoop集群下载到本地,压缩之后再上传到hadoop则太耗时间.于是想到能否直接在HDFS文件系统上进行 ...

  5. C#或ASP.NET绘图初探

    C#或ASP.NET的简单绘图 public void ProcessRequest (HttpContext context) { context.Response.ContentType = &q ...

  6. Leetcode 138. 复制带随机指针的链表

    1.题目要求 给定一个链表,每个节点包含一个额外增加的随机指针,该指针可以指向链表中的任何节点或空节点. 要求返回这个链表的深度拷贝. 2.解题思路 (1)笔试思路(求速度,拿分数):使用哈希表 /* ...

  7. lnmp 环境搭建

    3.安装 lnmp : wget http://soft.vpser.net/lnmp/lnmp1.3-full.tar.gz tar -zxvf lnmp1.3-full.tar.gz cd lnm ...

  8. uboot下的命令行

    1.典型嵌入式linux系统启动过程: 嵌入式系统上电后先执行uboot.然后uboot负责初始化DDR,初始化Flash,然后将OS从Flash中读取到DDR中,然后启动OS(OS启动后uboot就 ...

  9. rabbitmq使用命令创建交换机、队列及绑定

    http://www.jusene.me/2018/02/20/rabbitmq-2/

  10. 【BZOJ】1577: [Usaco2009 Feb]庙会捷运Fair Shuttle

    [题意]公车从1开到n,有k群牛想从一个点到达另一个点,公车最多乘坐c个人,牛群可以拆散,问最多载多少牛到达目的地. [算法]贪心+堆 [题解]线段和点的贪心,一般有按左端点排序和按右端点排序两种方法 ...