<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0px; padding: 0px; } input,button { outline: none; border: 0; } body { background-color: lightgrey; } ul { list-style: none; } a { text-decoration: none; color: #8e7373; } .top { width: 100%; height: 90px; background-color: #fff; overflow: hidden; position: relative; z-index: 100; } .fixed { position: fixed; } #left { width: 140px; height: 70px; position: relative; left: 293px; top: 30px; } #left div { width: 36px; height: 17px; position: absolute; right: 0px; top: -3px; font-size: 14px; text-align: center; color: #fff; background-color: grey; } #middle { position: absolute; top: 32px; left: 485px; } #middle input[type=\'text\'] { width: 294px; height: 28px; border: 1px solid lightgrey; box-sizing: border-box; } #middle button { position: absolute; left: 294px; top: 0px; width: 52px; height: 28px; background: url(\'images/search.png\') no-repeat #0fa7e4 center center; } #middle ul { width: 300px; position: absolute; top: 35px; left: 0px; } #middle li { float: left; font-size: 12px; margin-right: 14px; } #right { width: 229px; height: 29px; padding-left: 10px; box-sizing: border-box; position: absolute; top: 28px; right: 290px; } #right li { float: left; text-align: center; line-height: 29px; margin-right: 22px; } #right li a { font-size: 14px; } @font-face { font-family: \'icomoon\'; src: url(\'fonts/icomoon.eot?7kkyc2\'); src: url(\'fonts/icomoon.eot?7kkyc2#iefix\') format(\'embedded-opentype\'), url(\'fonts/icomoon.ttf?7kkyc2\') format(\'truetype\'), url(\'fonts/icomoon.woff?7kkyc2\') format(\'woff\'), url(\'fonts/icomoon.svg?7kkyc2#icomoon\') format(\'svg\'); font-weight: normal; font-style: normal; } #right span { font-family: icomoon; } #bottom { position: absolute; top: 110px; left: 120px; } #back { font-family: icomoon; width: 50px; height: 50px; background: rgba(0,0,0,0.2); text-align: center; line-height: 50px; font-size: 20px; position: fixed; right: 50px; top: 550px; display: none; } </style> </head> <body> <div class=\'top\'> <div id=\'left\'> <h2>兴趣部落</h2> <div>Beta</div> </div> <div id=\'middle\'> <div> <input type="text" name=""> <button></button> </div> <div> <ul> <li><a href="#">趣味测试</a></li> <li><a href="#">魁拔</a></li> <li><a href="#">迪丽热巴</a></li> <li><a href="#">吴亦凡</a></li> <li><a href="#">鹿晗</a></li> </ul> </div> </div> <div id=\'right\'> <ul> <li><a href="#">部落管理<span></span></a></li> <li><a href="#">帮助<span></span></a></li> <li><a href="#">登录</a></li> </ul> </div> </div> <div id=\'bottom\'> <img src="images/content.png"> </div> <div id=\'back\'></div> <script> var header = document.getElementsByClassName(\'top\')[0]; var back = document.getElementById(\'back\'); window.onscroll = function() { if(document.documentElement.scrollTop > 10) { header.className = \'top fixed\'; header.style.height = \'70px\'; back.style.display = \'block\'; }else { header.className = \'top\'; header.style.height = \'90px\'; back.style.display = \'none\'; } } back.onclick = backClick; var timeId; function backClick() { if(timeId) { clearInterval(timeId); timeId = null; } timeId = setInterval(function() { var step = 10; var target = 0; var current = document.documentElement.scrollTop; console.log(document.documentElement.scrollTop); if(current > target) { step = -Math.abs(step); } if(Math.abs(current - target) <= Math.abs(step)) { console.log(12); document.documentElement.scrollTop = target; console.log(document.documentElement.scrollTop); clearInterval(timeId); }else { current = current + step; document.documentElement.scrollTop = current; } },30) } </script> </body> </html>
运行结果：