Ich glaube, jeder hat Ankerpunkte verwendet! Ist es nicht ärgerlich, dass das Umschalten nach dem Klicken schwergängig ist?
Lassen Sie uns einen kleinen Trick teilen, um den Animationswechsel basierend auf dem Ankerpunkt-Versatzwert zu implementieren
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <style> *{ margin:0; padding:0;} .main{ width:1000px; margin:0 auto; position:relative; } .main img{ float:left;} .bg{ position:absolute; width:100%; z-index:-5;} .bg01{ height:885px;background:url(../images/b_01.jpg) no-repeat center;} .bg02{ height:938px;background:url(../images/b_04.jpg) no-repeat center; } .bg03{ height:946px;background:url(../images/b_02.jpg) no-repeat center; } .bg04{ height:946px;background:url(../images/b_03.jpg) no-repeat center; } .div_scoll{ position:fixed; width:50px; height:200px; right:100px; top:50%;} a{ display:block; background:#3F6; color:#000; width:50px; height:50px; } </style> </head> <body> <div class="wrapper"> <div class="main"> <div id="tab_01" class="tab"><img src="images/m_01.jpg" alt="" /></div> <div id="tab_02" class="tab"><img src="images/m_04.jpg" alt="" /></div> <div id="tab_03" class="tab"><img src="images/m_02.jpg" alt="" /></div> <div id="tab_04" class="tab"><img src="images/m_03.jpg" alt="" /></div> </div> <div class="bg"> <div class="bg01" id="bg01"></div> <div class="bg02" id="bg02"></div> <div class="bg03" id="bg03"></div> <div class="bg04" id="bg04"></div> </div> </div> <div class="div_scoll"> <a href="#bg01">图1</a> <a href="#bg02">图2</a> <a href="#bg03">图3</a> <a href="#bg04">图4</a> </div> <script> $(function(){ $(".div_scoll a").click(function(){ $("html,body").animate({ scrollTop:$($(this).attr("href")).offset().top + "px"},1000); }); }); </script> </body> </html>