“Back to top” link with jQuery and CSS

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"><ahref="top">Back totop</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 */

varscroll_timer;

vardisplayed=false;

var$message=$('#message a');

var$window=$(window);

vartop=$(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

UseThisTip is one of the best tech blogs that try to solve your computer and internet related
problems. You can find best how to technology articles here. We post best computer tricks and
internet tricks along with website review and mobile app reviews. We also do software reviews
and also try to give you list of best alternative software and apps so that you do not need to
buy paid software or app.

About

UseThisTip covers everything related to tech and web design. We have interesting tips and tricks of Software, apps, WordPress and More