4种方法实现页面内锚文本跳转(ScrollTo插件、Html锚点、原生javascript、scrollTop()方法)

jerry JQuery 2015年08月10日 收藏

jQuery.ScrollTo插件

  1. $(function(){
  2. $(".sw-w-ScrollTo").click(function(){
  3. $.scrollTo('#zj_header',500);
  4. });
  5. });

HTML锚文本跳转

  1. <a href="#sw-w" style="font-size:20px;">点击滚动到#sw-w</a>
  2. <div id="sw-w" style="margin:1200px 0 500px 0; background-color:#333; width:100%; height:50px; color:#FFF; font-size:30px; line-height:50px;">ssss</div>

javascript页面内跳转

  1. function scrollWindow()
  2. {
  3. window.scrollTo(100,500)
  4. }

jQuery-scrollTop() 方法

  1. $(function(){
  2.   $(".sw-w-scrollTop").click(function(){
  3.     $("body").scrollTop(200);
  4.   });
  5. });

增加动画效果:

  1. $(function(){
  2.     $(".sw-w-scrollTop").click(function(){
  3.         $("body").animate({scrollTop:"200px"},1000,'easeInOutExpo');
  4.     });
  5. });