Reputation: 3283
I have got a task to set image for the page when it scroll down.When it pressing it must go to up page.How can I do this? code is
<div><a href="#top"><img src="http://www.antisocialmediallc.com/wp-content/uploads/2012/02/Up-Arrow.jpg"></div>
DEMO FIDDLE
I dn't want the image as shown on the page.It must comes only on scroll down.
Upvotes: 2
Views: 984
Reputation: 7380
Working DEMO here http://jsfiddle.net/bxL44/2/
<p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
<p><a id="toTop"><img src="http://www.theperfectshuffle.com/resources/icons/up-arrow-icon.png" width="50" height="50"></a></p>
#toTop {
position:fixed;
bottom:5px;
right:5px;
display:none;
cursor:pointer;
text-decoration:underline;
background:red;
}
$(document).ready(function() {
// ========================================================= go to top
$(window).scroll(function() {
if ($(this).scrollTop()) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$('#toTop').click(function(){
$('html, body').animate({ scrollTop: 0 }, 'fast');
});
});
Upvotes: 1
Reputation: 2914
Working demo of the code is here
HTML
<p id="top">
hesdfdfgdg
gdg
dgd
gd
gd
g
dfgd
gd
gd
gd
gd
gd
gd
gd
gd
gd
gd
gd
gd
gd
gd
gd
g
dg
</p>
<p>dgfdgdfg
dg
dfg
dgd
gd
gf
dg
dfg
dg
dg
dgd
gd
gd
</p>
<p>
dfgd</p>
<p>
dfgd</p>
<p>
dfgd</p>
<p>
dfgd</p>
<p>
dfgd</p>
<p>
dfgd</p><p>
dfgd</p><p>
dfgd</p><p>
dfgd</p>vv<p>
dfgd</p><p>
dfgd</p>
<p>
dfgd</p>
vv
v
v<p>
dfgd</p><p>
dfgd</p><p>
dfgd</p><p>
dfgd</p><p>
dfgd</p><p>
dfgd</p><p>
dfgd</p><p>
dfgd</p><p>
dfgd</p><p>
dfgd</p><p>
dfgd</p><p>
dfgd</p><p>
dfgd</p><p>
dfgd</p><p>
dfgd</p><p>
dfgd</p>
<div id="back-top">
<a href="#top"><img src="http://www.antisocialmediallc.com/wp-content/uploads/2012/02/Up-Arrow.jpg"/></a>
</div>
Jquery
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
CSS
#back-top {
position: fixed;
bottom: 30px;
margin-left: -150px;
}
#back-top a:hover {
color: #000;
}
/* arrow icon (span tag) */
#back-top span {
width: 108px;
height: 108px;
display: block;
margin-bottom: 7px;
background: #ddd url('http://www.antisocialmediallc.com/wp-content/uploads/2012/02/Up-Arrow.jpg') no-repeat center center;
#back-top a:hover span {
background-color: #777;
}
Upvotes: 1
Reputation: 97
put image as hidden,
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$('img').show().animate();
} });
demo on http://jsfiddle.net/xShg7/4/
Upvotes: 0
Reputation: 2069
try smth like this:
if ($(window).scrollTop() >= "250") $('#your_div').fadeIn("slow");
it means that if you lower than 249 from the top you will gain the button
$('#your_div').click(function () {
$('body,html').animate({
scrollTop: 0
}, 300);
return false;
});
so after you click it you will go up through 0,3 sec.
Upvotes: 0
Reputation: 3015
Use ScrollTop() function in jquery
Call this function in image onclick
onclick="$('body').scrollTop();"
Upvotes: 0