JQ滚动特效
2024-08-28 23:30:20
<!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实现平滑滚动到指定锚点的方法。分享给大家供大家参考。
最新文章
- Redis 缓存过期（maxmemory） 配置/算法 详解
- [PHP] Xhprof 非侵入式使用指南
- Xn数列（codevs 1281）
- php高级面试题知识点(转载)
- mongoDb学习以及spring管理
- NetCat使用手册
- Oralce_语法
- C++ 中的“ ！” 运算
- 教程-Delphi调用C# WEBSERVICE（二）
- Stanford CoreNLP--Named Entities Recognizer(NER)
- ASP.NET repeater添加序号列的方法
- leetcode [64] merge tow sorted lists
- html日历(1)
- Core Animation 文档翻译 （第五篇）
- 最简单的Nginx讲解--HTTP服务器、正向代理、反向代理、负载均衡
- UGUI中UI与模型混合显示
- 第六章Django
- 【UOJ348】【WC2018】州区划分 状压DP FWT
- [Err] 1231 - Variable 'sql_mode' can't be set to the value of 'NULL
- [经验]微信开放平台，一个APP secret可以绑定一个APP,然后再绑定一个ipad 版本APP