Without taking your too much time I'll first let you know, this button is simple anchor tag and clicking on this will take user to top of your web page. Perhaps user can prefer space-bar but still useful for some users.
By default in HTML you can put an anchor tag with href value of #top it works fine, to make it more decorative you need to put few lines of jQuery so it will smoothly scroll the window to top.
I am using jQuery to animate the window so you need to include jQuery at your web page.
if you don't have get it from here http://jquery.com/download/
JS
Complete Working Example
Comment your suggestions and queries :)
By default in HTML you can put an anchor tag with href value of #top it works fine, to make it more decorative you need to put few lines of jQuery so it will smoothly scroll the window to top.
I am using jQuery to animate the window so you need to include jQuery at your web page.
if you don't have get it from here http://jquery.com/download/
JS
jQuery(document).ready(function(){
/* Only hide link if js is enable */
jQuery('#scg-jump2top').hide();
/* hide link if user is already on top */
jQuery( window ).scroll(function(){
if (jQuery(this).scrollTop() > 300)
jQuery('#scg-jump2top').fadeIn();
else
jQuery('#scg-jump2top').fadeOut();
});
/* jump to top */
jQuery('#scg-jump2top').click(function(e){
e.preventDefault();
jQuery("html, body").animate({ scrollTop : 0 }, 600);
});
});
Complete Working Example
Comment your suggestions and queries :)
0 comments:
Post a Comment