JavaScript实现快速定位到底部和顶部的前端的名字：
【准备材料】：① HTML知识；② JavaScript知识；③ CSS知识；④ 知道如何导入jQuery；
【申明】本例子来源于[站长素材]；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <title>置顶置底演示</title> <script type="text/javascript" src="js/jquery-3.3.1.js" ></script> <script type="text/javascript"> $(function() { $("#updown").css("top", window.screen.availHeight / 2 - 100 + "px"); $(window).scroll(function() { if($(window).scrollTop() >= 100) { $('#updown').fadeIn(300); } else { $('#updown').fadeOut(300); } }); $('#updown .up').click(function() { $('html,body').animate({ scrollTop: '0px' }, 400); }); $('#updown .down').click(function() { $('html,body').animate({ scrollTop: document.body.clientHeight + 'px' }, 400); }); } ); </script> <style type="text/css"> * { padding: 0; margin: 0 } body { height: 3000px; } #updown { _top: expression(eval((document.compatMode&&document.compatMode=="CSS1Compat")?documentElement.scrollTop+documentElement.clientHeight-this.clientHeight-1:document.body.scrollTop+document.body.clientHeight-this.clientHeight-1)); position: fixed; _position: absolute; top: 200px; right: 30px; display: none; } #updown span { cursor: pointer; width: 48px; height: 50px; display: block; } #updown .up { background: url(images/updown.png) no-repeat; } #updown .up:hover { background: url(images/updown.png) top right no-repeat; } #updown .down { background: url(images/updown.png) bottom left no-repeat; } #updown .down:hover { background: url(images/updown.png) bottom right no-repeat; } a { text-decoration: none; outline: none; color: #666666; } a:hover { text-decoration: none } img { border: 0 } ul { list-style: none; margin: 0; } h2 { color: #6CBD45; font-size: 14px; font-weight: bold; padding-bottom: 0.5em; margin: 0; } h3 { font-size: 13px; font-weight: bold; } #meun { color: #fff; padding-left: 10px; } #meun img { float: left; } #submeun { margin-left: 70px; float: left; } #submeun li { text-align: center; margin-right: 10px; float: left; display: inline; } #submeun li a { color: #fff; height: 50px; line-height: 50px; font-size: 14px; font-weight: bold; text-align: center; padding-left: 15px; padding-right: 15px; display: block; } #submeun li.cur { text-align: center; background: #82ce18; margin-right: 10px; float: left; display: inline; } #top { background-color: #000; margin: 0em 0 10px 0em; border-style: solid; border-width: 1px; border-color: #E5E5E5; height: 50px; line-height: 50px; } h2.subtitle { font-size: 13px; float: right; color: #6CBD45; margin: 0 10px; text-align: right; } h1.title { height: 50px; font-size: 12px; background: url(logo.png) no-repeat; } h1.title a:link, h1.title a:visited, h1.title a:hover { color: #000; text-decoration: none; } </style> </head> <body> <div id="content"><br><br><br><br> <center><b><font size="7" color="#FF0000">请往下滚动</font></b></center><br><br><br> <!--DEMO start--> <div id="updown"><span class="up"></span><span class="down"></span></div> <!--DEMO end--> </div> <p align="center">适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p><br> <p align="center">来源： <a href="http://sc.chinaz.com/" target="_blank">站长素材</a> </p> </body> </html>
① 初始效果显示：
② 操作显示：
