<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.1.9.1.min.js"></script>
</head>
<body>
<div class="header">
<div class="header-width">
<ul class="nav fr" >
<li class="list list2">
<a href="javascript:void(0)">头部</a>
</li>
<li class="list list2">
<a href="javascript:void(0)" to="main-one">锚点1</a>
</li>
<li class="list list3">
<a href="javascript:void(0)" to="main-two">锚点2</a>
</li>
<li class="list list4"">
<a href="javascript:void(0)" to="main-three">锚点3</a>
</li>
</ul>
</div>
<div style="height: 800px" id="main-one">main-one</div>
<div style="height: 800px" id="main-two">main-two</div>
<div style="height: 1200px" id="main-three">main-three</div>
<div class="gototop" style="position: fixed;right: 100px;bottom: 100px">返回顶部</div>
</div>
<script>
$(function () {
// 锚点定位
$('.header .list a').click(function () {
var id = $(this).attr('to');
var top = $("#" + id).offset().top ;
$("html, body").animate({
scrollTop: top
}, { duration: 500, easing: "swing" });
return false;
});
// 滚动事件
$(window).scroll(function(){
var windowH= $(window).height();
var scrollTop = $(window).scrollTop();
// 导航栏
if(scrollTop>300){
$('.gototop').css("display","block");
}else{$('.gototop').css("display","none");}
});
// 点击返回顶部
$('.gototop').click(function () {
$("html, body").animate({scrollTop: 0}, 500);
});
})
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
