$('.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. 分享一个JQuery弹出层插件

    JQuery插件TipsWindown 1.1 一个基于jQuery的弹出层.支持拖拽,支持内容为文字,图片,URL等!至于兼容性.在IE6下,弹出对像无法绝对固定.其他应该没啥大问题: 最新更新:( ...

  2. 使用canvas画一个雷达效果图的特效代码

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. HDU 5640

    King's Cake Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total ...

  4. [ZJOI2010]排列计数 (组合计数/dp)

    [ZJOI2010]排列计数 题目描述 称一个1,2,...,N的排列P1,P2...,Pn是Magic的,当且仅当2<=i<=N时,Pi>Pi/2. 计算1,2,...N的排列中有 ...

  5. SSO解决session共享的几种方案

    之前做项目遇到了这个sso系统,当时只是理解了一部分,今天偶尔发现一篇文章,觉得写的不错,增加了sso知识: 单点登录在现在的系统架构中广泛存在,他将多个子系统的认证体系打通,实现了一个入口多处使用, ...

  6. nodejs+react构建仿知乎的小Demo

    一.命令行进入指定项目文件夹 二.相关命令安装环境和项目工具 npm init npm install react -- save npm install -g gulp npm install -- ...

  7. linux查看内存cpu占用

    linux查看内存cpu占用top 命令  按q退出 可以添加额外选项选择按进程或按用户查看如: top -u gitu PID:进程idPR:进程的优先级别,越小越优先被执行NInice:值VIRT ...

  8. 关于MyBatis一些小错误,元素内容必须由格式正确的字符数据或标记组成.

    今天在Mapper.xml文件写查询语句报了个奇怪的错误 Caused by: org.apache.ibatis.builder.BuilderException: Error creating d ...

  9. LightOJ 1093 - Ghajini 线段树

    http://www.lightoj.com/volume_showproblem.php?problem=1093 题意:给定序列,问长度为d的区间最大值和最小值得差最大是多少. 思路:可以使用线段 ...

  10. Linux系统查看系统信息

    1. CPU # lscpu # cat /proc/cpuinfo //可以知道每个cpu信息,如每个CPU的型号,主频等 2. 内存 # free -m # cat /proc/meminfo / ...