ad

“Back to top” link with jQuery and CSS

backtotop

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.

<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

#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

$(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);
});
});

 

Tags: | | |
Nord VPN Sale

Deepanker Verma is the founder of Techlomedia. He is a tech blogger, developer and gadget freak.


Similar Articles

1 Comments

  • latest internet explorer for mac says:

    Utterly indited articles , appreciate it for entropy.

  • latest internet explorer for mac says:

    Utterly indited articles , appreciate it for entropy.

  • golf lessons ga says:

    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

  • golf lessons ga says:

    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

Leave a comment

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

2020 UseThisTip | Developed By Deepanker