HTML:
<html> <body> <div id="back-to-top" style="cursor:pointer; display:block;"> 上升按钮 </div> </body> </html>
JS:
$(function(){ //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失 $(function () { $(window).scroll(function(){ if ($(window).scrollTop()>100){ $("#back-to-top").fadeIn(1500); } else { $("#back-to-top").fadeOut(1500); } }); //当点击跳转链接后，回到页面顶部位置 $("#back-to-top").click(function(){ $('body,html').animate({scrollTop:0},1000); return false; }); }); });
======
扩展升级:
点击菜单按钮, 动态滚动到对应位置.
HTML:
<div id="header_nav"> <ul> <li> <a href="#home">首页</a> </li> <li> <a href="#download">下载</a> </li> <li> <a href="#contact">联系</a> </li> </ul> </div>
JS:
// -- initial -- $(document).ready(function() { $("#header_nav a").click(function(){ var selector=$(this).attr("href"); var top = $(selector).offset().top; var current_top = $('body').scrollTop(); var animate_time= Math.abs( current_top - top ) * 0.8; // 800px per second. $('body,html').animate({scrollTop:top},animate_time); return false; }); });