<!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. DM企业建站系统v201710 sql注入漏洞分析 | 新版v201712依旧存在sql注入

    0x00 前言 本来呢,这套CMS都不想审的了.下载下来打开一看,各种debug注释,排版烂的不行. 贴几个页面看看 感觉像是新手练手的,没有审下去的欲望了. 但想了想,我tm就是新手啊,然后就继续看 ...

  2. Mac下安装ant(利用brew)

    安装ant最简单的方法就是通过brew.步骤如下:1. 安装brew(如果已经安装可以跳过这步). ruby -e "$(curl -fsSL https://raw.github.com/ ...

  3. ZZ_INEERNAL每个栏位的含义

    ZZ_INEERNAL包含10列,每列之间用,隔开 第一列:exception class,有KE/NE/JE/EE等 第二列:pid 第三列:tid 第四列:固定是99 第五列:固定是/data/c ...

  4. 【数论】洛谷P1414又是毕业季II

    题目背景 "叮铃铃铃",随着高考最后一科结考铃声的敲响,三年青春时光顿时凝固于此刻.毕业的欣喜怎敌那离别的不舍,憧憬着未来仍毋忘逝去的歌.1000多个日夜的欢笑和泪水,全凝聚在毕业 ...

  5. Android数据库之判断表是否存在

    Android开发的时候我们可能会用到它的本地数据库,在使用的时候有可能我们已经储存了数据了,但是,我们的表已经创建了,里面有数据,我们要怎么判断表是否已经创建可能就需要琢磨一下. 以下便是利用了,查 ...

  6. C#学习笔记-组合模式

    什么是组合模式? 组合模式(Composite):将对象组合成树形结构以表示“部分-整体”的层次结构. 组合模式使得用户对单个对象和组合对象的使用具有一致性. 何时使用组合模式? 当需求中是体现部分与 ...

  7. 使用mysql乐观锁解决并发问题

    案例说明: 银行两操作员同时操作同一账户.比如A.B操作员同时读取一余额为1000元的账户,A操作员为该账户增加100元,B操作员同时为该账户扣除50元,A先提交,B后提交.最后实际账户余额为1000 ...

  8. Mybatis之基于XML的增删改查

    这里先吐槽下,写的半天的东西,IE浏览器弹出调试窗口导致写的东西全部没保存,搞得我还要重新用谷歌写,思路全没了,fuck. 前面学习了下spring的DAO层,说起DAO层,那ORM肯定是少不了的,O ...

  9. linux(五)之vi编译器

    前面介绍了linux的常用命令和对文本的操作,接下来我将对大家领略一下vi编译器的强大功能.希望大家觉得写的还不错的话可以点个“推荐”哦! 一.vim/vi编译器简介 Vim/Vi是一个功能强大的全屏 ...

  10. 洛谷 2634&&BZOJ 2152: 聪聪可可【点分治学习+超详细注释】

    2152: 聪聪可可 Time Limit: 3 Sec  Memory Limit: 259 MBSubmit: 3435  Solved: 1776[Submit][Status][Discuss ...