Adding a “back to top” button or link at the bottom of the page is a nice idea which provide a better to way to move to the top of the web page. But you can make this much better by adding some cool jQuery effects. It can impress your visitors.
In this post i am writing how you can create a cool “Back to top” in your website with CSS and jQuery
HTML: This is the html code. Main part is the div with id message which contains the link. It must be at the bottom of all the contents. This will show a hyper link of back to top. Change the text the one which you want to show on the bottom of the page.
|
1 2 3 4 5 |
<body> <div id="top"></div> <!-- put all of your normal <body> stuff here --> <div id="message"><a href="top">Back to top</a></div> </body> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
#message a { /* display: block before hiding */ display: block; display: none; /* link is above all other elements */ z-index: 999; /* link doesn't hide text behind it */ opacity: .8; /* link stays at same place on page */ position: fixed; /* link goes at the bottom of the page */ top: 100%; margin-top: -80px; /* = height + preferred bottom margin */ /* link is centered */ left: 50%; margin-left: -160px; /* = half of width */ /* round the corners (to your preference) */ -moz-border-radius: 24px; -webkit-border-radius: 24px; /* make it big and easy to see (size, style to preferences) */ width: 300px; line-height: 48px; height: 48px; padding: 10px; background-color: #000; font-size: 24px; text-align: center; color: #fff; } |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
$(function () { /* set variables locally for increased performance */ var scroll_timer; var displayed = false; var $message = $('#message a'); var $window = $(window); var top = $(document.body).children(0).position().top; /* react to scroll event on window */ $window.scroll(function () { window.clearTimeout(scroll_timer); scroll_timer = window.setTimeout(function () { // use a timer for performance if($window.scrollTop() <= top) // hide if at the top of the page { displayed = false; $message.fadeOut(500); } else if(displayed == false) // show if scrolling down { displayed = true; $message.stop(true, true).show().click(function () { $message.fadeOut(500); }); } }, 100); }); }); |
advertisement
Utterly indited articles , appreciate it for entropy.
That is very interesting, You’re a very skilled blogger. I’ve joined your rss feed and look ahead to searching for more of your fantastic post. Also, I’ve shared your web site in my social networks