<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin: 0; } ul{ overflow: hidden; background: skyblue; } l ...
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin: 0; } ul{ overflow: hidden; background: skyblue; } li{ list-style:none; float: left; padding: 10px; color: #fff; } #a1,#a2,#a3{ height: 600px; background: saddlebrown; } #a2{ background: seagreen; } #a3{ background: slateblue; } </style> </head> <body> <ul> <li><a href="#a1">首頁</a></li> <li><a href="#a2">冊頁</a></li> <li><a href="#a3">商業</a></li> </ul> <section id="a1"></section> <section id="a2"></section> <section id="a3"></section> <script src="http://code.jquery.com/jquery-1.5.js"></script> <script> var time = 350; $.sss = function(element,speed){ $("html,body").animate({// 關鍵就在這裡 scrollTop:$(element).offset().top },speed); }; $(function(){ $("a").click(function(){ var self = $(this); var el = self.attr("href"); $.sss(el,time); }) }) </script> </body></html>
