jquery锚点带动画跳转和返回顶部

此作品是一款非常实用的特效，实现了jquery锚点带动画跳转和返回顶部，现很这种效果越来越流行了，应用场景也非常广，像购物商城网站、素材网站都有很多模块的，这时锚点就可以用上场了，方便定位到相应的模块那里，增强用户体验效果，网友们可根据自己的情况来美化锚点的样式，

分类：其它特效 > jQuery插件难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

首先引用文件

<script src="jquery.min.js" type="text/javascript"></script>
<link href="css/christmas.css" rel="stylesheet" type="text/css">

核心代码：

jQuery(document).ready(function($) {
   $(".index_nav li a").click(function(event) { 
      var index=this.title
      var id='#'+'index_'+index
     $("html,body").animate({scrollTop: $(id).offset().top}, 1000);
   });
   $(".taoba").click(function(event) { 
      var index=this.title
      var id='#'+'index_'+index
     $("html,body").animate({scrollTop: $(id).offset().top}, 1000);
   });
   function a(x,y){
    l = $('#main').offset().left;
    w = $('#main').width();
    $('#tbox').css('left',(l + w + x) + 'px');
    $('#tbox').css('bottom',y + 'px');
}
//获取#tbox的div距浏览器底部和页面内容区域右侧的距离函数#main为页面的可视宽度
$(function() {  
    $(window).scroll(function(){
    t = $(document).scrollTop();
    if(t>500){
      $('#tbox').show();
    }else{
      $('#tbox').hide();
    }
    if(t > 50){
        $('#gotop').fadeIn('slow');
    }else{
        $('#gotop').fadeOut('slow');
    }       
})   
    a(10,100);//#tbox的div距浏览器底部和页面内容区域右侧的距离
    $('#gotop').click(function(){ 
        $('body,html').animate({
            scrollTop: 0
        },
        800);//点击回到顶部按钮，缓懂回到顶部,数字越小越快
        return false;  
    })
});