<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/test1.css">
<script src="js/jquery.min.js"></script>
<script src="js/test1.js"></script>
</head>
<body>
<div class="con w">
<div class="header">
头部
</div>
<div class="main">
<div class="main-1"></div>
<div class="main-2"></div>
<div class="main-3"></div>
<div class="main-4"></div>
</div>
<div class="tool-bar">
<ul>
<li ><a href="javascript:;">main-1</a></li>
<li><a href="javascript:;">main-2</a></li>
<li><a href="javascript:;">main-3</a></li>
<li><a href="javascript:;">main-4</a></li>
</ul>
</div>
</div>
<div class="footer"></div>
<div class="back-top">
<a href="javascript:;">顶部</a>
</div>
</body>
</html>
window.onload = function () {
function showBackTop() {
var docTop = $(document).scrollTop();
var main1Top = $('.main-1').offset().top;
if (docTop >= main1Top) {
$('.back-top').stop().fadeIn(10);
} else {
$('.back-top').stop().fadeOut(10);
}
}
showBackTop()
var flag = true
$(window).scroll(function () {
showBackTop();
var last = $('.main').children().last();
if ($(document).scrollTop() <= $('.main').children().eq(0).offset().top
|| $(document).scrollTop() >= last.offset().top + last.outerHeight()
) {
$('.tool-bar li').removeClass('active')
} else{
if (flag) {
var docTop = $(document).scrollTop();
$('.main div').each(function (i, ele) {
if ($(document).scrollTop() >= $(ele).offset().top) {
$('.tool-bar li').eq(i).addClass('active').siblings().removeClass('active')
}
})
}
}
})
$('.back-top a').click(function () {
$('html,body').animate({scrollTop:0})
})
$('.tool-bar li').click(function () {
flag = false
$(this).addClass('active').siblings().removeClass('active')
$('html,body').animate({scrollTop:$('.main div').eq($(this).index()).offset().top+1},function () {
flag = true
})
})
}
* {
box-sizing: border-box;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
color: #000;
text-decoration: none;
}
body {
margin: 0;
}
.con {
position: relative;
}
.w {
width: 1200px;
margin: 0 auto;
}
.header {
height: 200px;
background-color: #1ba1e6;
margin-bottom: 20px;
}
.main {
border: 1px solid #ccc;
}
.main div[class^=main-] {
height: 400px;
margin-bottom: 20px;
}
.main div[class^=main-]:last-child {
margin-bottom: 0;
}
.main div.main-1 {
background-color: #40b83f;
}
.main div.main-2 {
background-color: #fff7a4;
}
.main div.main-3 {
background-color: #ff779e;
}
.main div.main-4 {
background-color: #ff7879;
}
.footer {
height: 50px;
background-color: #ccc;
margin-top: 20px;
}
.back-top {
display: none;
cursor: pointer;
position: fixed;
bottom: 150px;
right: 50px;
width: 40px;
height: 40px;
background-color: #52ee9f;
}
.tool-bar a {
display: block;
}
.tool-bar {
position: fixed;
left: 50%;
margin-left: -600px;
transform: translateX(-105%);
top: 200px;
width: 100px;
height: 100px;
text-align: center;
border-radius: 2px;
border: 1px solid #ccc;
box-shadow: 0 0 1px 0 rgba(0,0,0,.5);
}
.tool-bar li {
height: 25px;
line-height: 25px;
border-bottom: 1px solid #ccc;
}
.tool-bar li:last-child {
border-bottom: none;
}
.tool-bar li:hover {
background-color: rgba(0,191,255,.1) ;
}
.tool-bar ul li.active {
background-color: deepskyblue;
}