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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Release: 2016-05-16 18:12:03
Original
912 people have browsed it

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!
Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template