屏幕的滚动我这边给分成两种:
- 从某个位置直接滚动到最顶端
- 点击按钮到指定的位置,这个会涉及到 锚点
在我的文章《设置锚点的三种方法》里面有介绍到,不明白的朋友看一下。
第一种方法最简单,只要利用锚点id定位就可以直接实现了。这种这边就不多做介绍了,主要介绍第二种,会第二种,第一种都是小意思了
介绍第二种先来点代码,大家看的比较清楚:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滚动</title>
<style type="text/css">
.classCont div {
height: 400px;
width: 200px;
border: 1px solid #000000;
}
.hrefCont{
position: fixed;
top: 50%;
left: 230px;
}
.hrefCont a{
display: block;
width: 20px;
height: 20px;
margin-bottom: 2px;
text-align: center;
line-height: 20px;
border: 1px groove #000000;
cursor: pointer;
text-decoration: none;
}
</style>
</head>
<body>
<div class="classCont">
<div id="class1">1</div>
<div id="class2">2</div>
<div id="class3">3</div>
<div id="class4">4</div>
<div id="class5">5</div>
</div>
<div class="hrefCont">
<a href="#class1">1</a>
<a href="#class2">2</a>
<a href="#class3">3</a>
<a href="#class4">4</a>
<a href="#class5">5</a>
</div>
</body>
</html>
运行结果界面
运行后大家会发现没动画确实很生硬,一点都不友好。接下来我们来家电动画,在原来的基础上加入js代码:
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top + "px"
}, {
duration: 500,
easing: "swing"
});
return false;
});
});
</script>
点击相应的<a>
标签,对html和body标签执行整体动画处理,执行中获取<a>
标签href
的属性值,这个值也就是锚点的id。
例如:点击右边浮动框 1 的时候,$($(this).attr("href"))
等于$("#class1")
。再获取 id 为 class1 顶部的偏移量,这个偏移量就是滚动的距离。之后设置一下滚动的时间和滚动的方式。
- duration 是滚动的时间
- easing 是滚动的方式
有时间的朋友可以去看看这个,挺好玩
上面代码看懂的大神请不要嫌弃我啰嗦,具体的效果体验还是要大家自己动手实践了。如有更好方法请开尊口!
帮到你了么?喜欢就点赞吧!^_^