I am also learning jquery recently, so I will record it by the way.
HTML
CSS
.scroll{
background:url( ../image/scroll.gif) no-repeat center top transparent;
bottom:100px;
cursor:pointer;
height:67px;
width:18px;
position:fixed ;
_position:absolute; /*Compatible with IE6*/
_top: expression(eval(document.documentElement.scrollTop) 700); /*700 is the set distance from the top of the picture and can be modified. Without adding 700 images, the images will stick to the top and scroll */
}
html{_text-overflow:ellipsis;} /*Solve image jitter under IE6*/
top.js
$(document).ready(function(){
var show_delay;
var scroll_left=parseInt((document.body.offsetWidth-960)/2) 961; //960 is the page width
$(".scroll").click(function (){
document.documentElement.scrollTop=0;
document.body.scrollTop=0;
});
$(window).resize(function (){
scroll_left=parseInt((document .body.offsetWidth-960)/2) 961;
$(".scroll").css("left",scroll_left);
});
reshow(scroll_left,show_delay);
});
function reshow(marign_l,show_d) {
$(".scroll").css("left",marign_l);
if((document.documentElement.scrollTop document.body. scrollTop)!=0)
{
$(".scroll").css("display","block");
}
else
{
$(" .scroll").css("display","none");}
if(show_d) window.clearTimeout(show_d);
show_d=setTimeout("reshow()",500);
}
Finally, don’t forget the
jQuery.js file!