<!DOCTYPE html>

 <html lang="zh">

     <head>

         <meta charset="UTF-8" />

         <meta name="viewport" content="width=device-width, initial-scale=1.0" />

         <meta http-equiv="X-UA-Compatible" content="ie=edge" />

         <title>JQ滚动特效</title>

         <style type="text/css">

             *{

                 margin: 0;

                 padding: 0;

             }

             a{

                 text-decoration: none;

             }

             ul,li{

                 list-style: none;

             }

             .header{

                 height: 300px;

             }

             .header ul li{

                 float: left;

                 padding: 20px;

                 margin-right: 20px;

                 background-color: #FFC0CB;

             }

             .content div{

                 height: 300px;

                 border: 1px solid pink;

             }

         </style>

         <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

         <script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>

         <script type="text/javascript">

             /*锚点滚动特效function封装*/

             $(function(){

               $('a[href*=#],area[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;

                     $('html,body').animate({

                       scrollTop: targetOffset

                     },

                     1000);

                     return false;

                   }

                 }

               });

             })

         </script>

     </head>

     <body>

         <div class="warpper">

             <!--nav-->

             <div class="header">

                 <ul>

                     <li><a href="#content1">qqqqq</a></li>

                     <li><a href="#content2">qqqqq</a></li>

                     <li><a href="#content3">qqqqq</a></li>

                     <li><a href="#content4">qqqqq</a></li>

                     <li><a href="#content5">qqqqq</a></li>

                 </ul>

             </div>

             <div class="content">

                 <div id="content1">

                     <h1>54666645646565</h1>

                 </div>

                 <div id="content2">

                     <h1>54666645646565</h1>

                 </div>

                 <div id="content3">

                     <h1>54666645646565</h1>

                 </div>

                 <div id="content4">

                     <h1>54666645646565</h1>

                 </div>

                 <div id="content5">

                     <h1>54666645646565</h1>

                 </div>

             </div>

         </div>

     </body>

 </html>

jQuery实现平滑滚动到指定锚点的方法。分享给大家供大家参考。

JQ滚动特效的更多相关文章

  1. 一款非常炫酷的jQuery动态随机背景滚动特效

    一款非常炫酷的jQuery动态随机背景滚动特效 图片背景会不停息的滚动,带有那种漂浮的视觉效果,小圈圈飘动. 更好的是还兼容IE6浏览器,大伙可以好好研究研究. 适用浏览器:IE6.IE7.IE8.3 ...

  2. jquery版楼层滚动特效

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>楼 ...

  3. Sequence.js 实现带有视差滚动特效的图片滑块

    Sequence.js 功能齐全,除了能实现之前分享过的现代的图片滑动效果,还可以融合当前非常流行的视差滚动(Parallax Scrolling)效果.让多层背景以不同的速度移动,形成立体的运动效果 ...

  4. 原生js实现tab选项卡里内嵌图片滚动特效代码

    <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...

  5. 基于html5海贼王单页视差滚动特效

    分享一款基于html5海贼王单页视差滚动特效是一款流行滑落网页特效代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="top"> < ...

  6. html5和css3实现的3D滚动特效

    今天给大家带来一款html5和css3实现的3D滚动特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"&g ...

  7. 手风琴图片和钢琴导航栏JQ滑动特效

    手风琴JQ滑动特效 1.效果预览: 2.相关代码: <!DOCTYPE html> <html lang="en"> <head> <me ...

  8. 【前端】jQuery实现锚点向下平滑滚动特效

    jQuery实现锚点向下平滑滚动特效 实现效果: 实现原理: 使用jQuery animate()方法实现页面平滑滚动特效 $('html, body').animate({scrollTop: $( ...

  9. [JQuery]ScrollMe滚动特效插件

    最近考完试,一切顺利,昨晚闲着无聊把最近要用的一个插件翻译了一下:ScrollMe. (╯‵□′)╯︵┻━┻地址请戳: /* ScrollMe -李明夕翻译(╯‵□′)╯︵┻━┻ */ ScrollM ...

随机推荐

  1. css布局--垂直居中

    1. 使用table-cell和vertical-align实现垂直居中 html <div class="parent">使用table-cell和vertical- ...

  2. Mysql：执行source sql脚本时，出现:error 2

    Centos下部署mysql: 1.yum -y install mysql*; 2.service mysqld start; 3.chkconfig mysqld on; 4.设置用户名和密码:m ...

  3. C# war3 巨魔精灵 minimap

    弃坑LOL后,无聊的时候玩玩 war3的RPG地图,巨魔与精灵.  玩了一段时间精灵....然后玩魔结果总是找不到人.所以就有了这个想法. 代码纯粹靠搬运. 说下原理,网上有份代码,可以查看当前选中目 ...

  4. 【网络流】POJ1273 Drainage Ditches

    Drainage Ditches Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 78671   Accepted: 3068 ...

  5. TinyMapper 使用总结

    初识TinyMapper TinyMapper是开源的对象映射框架,功能和AutoMapper一样.官网介绍,TinyMapper映射效率很高,下图是官方给的比较结果: TinyMapper使用简单, ...

  6. mysql5.7 设置远程访问

    mysql5.7设置远程访问不是和网上说的一样建个用户赋个权限就可以访问的.比如下边这个就是建用户赋权限,可能在之前的版本可以,但是我在我的mysql上一直不行.为此烦了好久!!!项目都耽误了!! 一 ...

  7. 【Java】CAS的乐观锁实现之AtomicInteger源码分析

    1. 悲观锁与乐观锁 我们都知道,cpu是时分复用的,也就是把cpu的时间片,分配给不同的thread/process轮流执行,时间片与时间片之间,需要进行cpu切换,也就是会发生进程的切换.切换涉及 ...

  8. RNN的简单的推导演算公式（BPTT）

    附上y=2x-b拟合的简单的代码. import numpy as np x = np.asarray([2,1,3,5,6]); y = np.zeros((1,5)); learning_rate ...

  9. spring boot +mysql + mybatis + druid的整理（一）——单数据源

    一,使用spring boot脚手架搭建spring boot框架生成maven项目 如下图所示: 设置自定义的坐标,即左侧的Group和Artifact,右侧可以搜索添加一些依赖,搜索不到的可以在p ...

  10. js--Dom Bom操作

    –      基础 –     内置对象 ● String对象:处理所有的字符串操作 ● Math对象:处理所有的数学运算 ● Date对象:处理日期和时间的存储.转化和表达 ● Array对象:提供 ...