当前位置: 代码迷 >> Web前端 >> JQuery关于返回浏览器顶部的有关问题
  详细解决方案

JQuery关于返回浏览器顶部的有关问题

热度:70   发布时间:2013-03-21 10:08:17.0
JQuery关于返回浏览器顶部的问题

?

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
 </head>
<style type="text/css">
     #returnTop {
        position:fixed;
        right:20px;
        width:36px;
        height:65px;
        background-image:url(top.png);
        background-repeat:no-repeat;
        background-position:0 0;
		bottom:-70px;
       	cursor:pointer;
    }
    #returnTop:hover{
        background-position:0% 100%;
    }
</style>
<script src="jquery.js" type="text/javascript"></script> 
<script type="text/javascript">
	$(document).ready(function(){
	
		var returnTop = $("#returnTop");
		
		returnTop.click(function(){
			$("html,body").animate({scrollTop:0},120);
		});
		$(window).bind("scroll",function(){
			var loach = document.documentElement.scrollTop || document.body.scrollTop;  
			if(loach>=100){
				returnTop.animate({bottom:'100px'},100);
			} else if(loach<100) {
				returnTop.animate({bottom:'-70px'},100);
			}
		});

	});0
</script>
 <body style="height:2000px;width:100px;">
	<div id="returnTop"></div>
 </body>

</html>

?

  相关解决方案