欢迎光临
我们一直在努力

单击返回顶部的简单js代码

js代码:

<script type="text/javascript">  
function gotoTop(min_height){  
    var gotoTop_html = '<div id="gotoTop"></div>';  
    $("#footer").append(gotoTop_html);  
    $("#gotoTop").click(  
        function(){$('html,body').animate({scrollTop:0},700);  
    }).hover(  
        function(){$(this).addClass("hover");},  
        function(){$(this).removeClass("hover");  
    });  
    min_height ? min_height = min_height : min_height = 600;  
    $(window).scroll(function(){   
        var s = $(window).scrollTop();  
        if( s > min_height){  
            $("#gotoTop").fadeIn(100);  
        }else{  
            $("#gotoTop").fadeOut(200);  
        };  
    });  
};  
gotoTop();  
</script>

注意:只要将这段代码放在网站的最后,将代码中的#footer替换成你网站的最后一个div id即可。

css代码:

#gotoTop{display:none;position:fixed;top:75%;left:50%;cursor:pointer;margin-top:-50px;margin-left:535px;width:55px; height:55px;background:url(../images/backtop.png) no-repeat left top;}  
  
#gotoTop.hover{background:url(../images/backtop.png) no-repeat rightright top;} 

图片自己准备一个.

未经允许不得转载:外贸商城系统,外贸网站模板,php建站教程,zencart模板 » 单击返回顶部的简单js代码

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

35PHP 更全 更专业 更方便