<!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">
/* $(document).ready(function() {
$("a.topLink").click(function() {
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top + "px"
}, {
duration: 500,
easing: "swing"
});
return false;
});
});*/
/*锚点滚动特效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>JQ锚点动画滚动
2017-11-10
1788
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
JQ锚点动画滚动
目录
相关文章
|
4月前
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动，跟随页面一起滚动，获取滚动距离，隐藏水平滚动条等
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动，跟随页面一起滚动，获取滚动距离，隐藏水平滚动条等
1189
0
0
|
6月前
|
JavaScript
前端开发
容器
|
6月前
|
JavaScript
|
11月前
|
前端开发
|
前端开发
|
前端开发
|
JavaScript
前端开发
【jQuery动画】停止动画、淡入淡出、自定义动画
动画队列中所有动画都是按照顺序执行的，默认只有当前的一个动画执行完毕，才会执行后面的动画。为此，jQuery提供了stop（）方法用于停止动画效果。通过此方法，可以让动画队列后面的动画提前执行。
179
0
0
|
Web App开发
JavaScript
Android开发
jquery判断页面滚动条(scroll)是上滚还是下滚，且是否滚动到头部或者底部
webtouch（webapp）页面，防苹果手机safari浏览器，往上滑动，底部导航消失，滑动到底部又出现。向下滑动，底部导航出现。
400
0
0
|
JavaScript
|
Web App开发
iOS开发
不滚动时隐藏自定义滚动条
现在部分浏览器已支持自定义滚动条，成了设计师和完美主义者的救星。
新版上线后，设计师又提了个新需求：把导航栏右侧的滚动条，在不滚动时隐藏掉（同时还发了个小视频表示效果）。就是下图中右侧的粗线：
在mac系统下测试了Chrome／Safari／Firefox浏览器，发现这些系统在默认情况下，不滚动时滚动条是隐藏的。
4050
1
1