Scroll Up button not showing up/not working?
I am developing a one page website. So far, I successfully implemented
'vertical smooth scroll' function (for my HOME, ABOUT, GALLERY...
navigation links) and it works just fine.
Now, I wanted to add another jquery to the same website - a small 'scroll
up' button which is supposed to show up at the bottom right corner for
easier navigation. The thing is that it never shows up???
Here is what I have done so far:
HTML:
<a class="scrollup" href="#">Scroll</a>
CSS:
.scrollup {
height: 38px;
width: 38px;
opacity: 1.0;
position:fixed;
bottom: 35px;
right: 35px;
background: url(images/top.png) no-repeat;
}
JQUERY (I opened scrollup.js document and added this code inside):
// scroll-to-top button show and hide
jQuery(document).ready(function(){
jQuery(window).scroll(function(){
if (jQuery(this).scrollTop() > 100) {
jQuery('.scrollup').fadeIn();
} else {
jQuery('.scrollup').fadeOut();
}
});
// scroll-to-top animate
jQuery('.scrollup').click(function(){
jQuery("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
I also added these scripts into my HTML header:
<script type='text/javascript'
src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel='stylesheet' type='text/css'
href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'/>
<script type='text/javascript' src='verticalsmoothscrolling.js'></script>
<script type='text/javascript' src='scrollup.js'></script>
Still, my vertical smooth scroll is working fine, but 'scrollup' button
never shows up??? Does the order of the scripts at the bottom of this
question matters? Or it is something else? Hope you guys can help me to
solve this. Thankssss :)
No comments:
Post a Comment