I'm trying to fancify my "back to top" image so that it fades in when a user starts scrolling. I'm having three problems:
- The image shows up on the left; see the css code below where I have "right: 0;" .
- The image shows up at the very bottom of all of the text on the page instead of being static at the bottom-right of the screen. In other words, the user can't see the Back to Top image until they scroll all the way to the bottom of the text. See the css code below where I have "position: fixed;" .
- The image displays immediately instead of displaying after a user starts to scroll; see the css code below where I have "display: none;" . After the user starts to scroll then the image fades in and out as expected.
Thoughts?
My Code
In the MasterPage file this is inside <body> </body> just before my footer information.
Code: Select all
<a class="backToTop" href="#"><img src="../Images/Shared/TOP.png" /></a>
Code: Select all
a.backToTop
{
position: fixed;
bottom: 0;
right: 0;
display: none;
}
Code: Select all
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.backToTop').fadeIn();
} else {
$('.backToTop').fadeOut();
}
});