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

jerry JQuery 2015年08月10日 收藏

jQuery.ScrollTo插件

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

HTML锚文本跳转

<a href="#sw-w" style="font-size:20px;">点击滚动到#sw-w</a>
<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页面内跳转

function scrollWindow()
{
window.scrollTo(100,500)
}

jQuery-scrollTop() 方法

$(function(){
  $(".sw-w-scrollTop").click(function(){
    $("body").scrollTop(200);
  });
});

增加动画效果:

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