Home >Web Front-end >JS Tutorial >Return to top effect based on jquery (compatible with IE6)_jquery

Return to top effect based on jquery (compatible with IE6)_jquery

WBOY
WBOYOriginal
2016-05-16 18:12:03887browse

I am also learning jquery recently, so I will record it by the way.

HTML

Copy code The code is as follows:




CSS
Copy code The code is as follows:

.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
Copy code The code is as follows:

$(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!
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn