<!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. [js高手之路] html5 canvas教程 - 绘制七巧板

    七巧板长什么样? 用canvas把他画出来,其实就是把这7个区域的图形,每个点的坐标找出来,再用moveTo, lineTo连线,设置不同的颜色即可. <head> <meta ch ...

  2. 【漏洞分析】dedecms有前提前台任意用户密码修改

     0x00 前言 早上浏览sec-news,发现锦行信息安全发布了一篇文章<[漏洞分析] 织梦前台任意用户密码修改>,看完之后就想着自己复现一下. 该漏洞的精髓是php的弱类型比较,'0. ...

  3. Java学习笔记10（面向对象三：接口）

    接口: 暂时可以理解为是一种特殊的抽象类 接口是功能的集合,可以看作是一种数据类型,是比抽象类更抽象的"类" 接口只描述所应该具备的方法,并没有具体实现,具体实现由接口的实现类(相 ...

  4. 如何在 iOS 真机运行 Appium

    使用 gui 启动的 appium 1.2.2 也会有这个问题,所以你要把 deviceconsole 复制到 /Applications/Appium.app/Contents/Resources/ ...

  5. hive问题： For direct MetaStore DB connections, we don't support retries at the client level

    已经配置好hive,mysql作为元数据的数据库.在hive中执行drop语句出错: drop table mytest; 错误提示如下: FAILED: SemanticException Unab ...

  6. Jfinal启动源码解读

    本文对Jfinal的启动源码做解释说明. PS:Jfinal启动容器可基于Tomcat/Jetty等web容器启动,本文基于Jetty的启动方式做启动源码的解读和分析,tomcat类似. 入口  JF ...

  7. 【Java学习笔记之十一】Java中常用的8大排序算法详解总结

    分类: 1)插入排序(直接插入排序.希尔排序) 2)交换排序(冒泡排序.快速排序) 3)选择排序(直接选择排序.堆排序) 4)归并排序 5)分配排序(基数排序) 所需辅助空间最多:归并排序 所需辅助空 ...

  8. Uva 10339 - Watching Watches【数论，暴力】

    题目链接:10339 - Watching Watches 题意:两个时钟,一个每天慢a秒,一个每天慢b秒,问两钟重新相遇的时刻 1圈有12 * 60 * 60秒,然后1圈 / abs(a - b), ...

  9. EMC题2

    易安信笔试题分享:1 protected成员函数能被肿么调用2 “has-a” relationship是指的啥,答案有instance, reference, pointer等...3 int, c ...

  10. Spider_Man_5.2 の Mongodb_使用

    一:简介 MongoDB是一款强大.灵活.且易于扩展的通用型数据库1.易用性 MongoDB是一个面向文档(document-oriented)的数据库,而不是关系型数据库.不采用关系型主要是为了获得 ...