Web Designer Wall
UI Components

Back to Top Button with Smooth Scrolling

By Aigars Silkalns Updated 7 min read

A back-to-top button needs four things: a link that jumps to the top, smooth scrolling that respects motion preferences, a button that appears only after the reader has scrolled, and keyboard and screen reader support. Modern CSS and a few lines of vanilla JavaScript cover all four. You do not need jQuery, an animation library or a scroll listener.

This tutorial builds the button in three layers: a plain anchor that works with no JavaScript, an IntersectionObserver that shows it at the right moment, and an optional CSS-only reveal with scroll-driven animations. The original 2011 version of this tutorial used jQuery’s scrollTop() and .animate() because browsers had no native way to do either.

Close-up of an article page scrolled down with a round blue back-to-top button in the bottom right corner
The finished button, zoomed in: round, fixed to the corner, shown only after scrolling.

Start with a link that already works

The foundation is an ordinary anchor. In HTML, the fragment #top is special: following a link to #top scrolls to the top of the document even when no element has that id. Giving the <body> an id="top" is still a harmless way to make the target explicit.

<body id="top">
  …page content…

  <a class="to-top" href="#top" aria-label="Back to top">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M12 19V5M5 12l7-7 7 7"/>
    </svg>
  </a>
</body>

Use a link, not a <button>. It navigates to a location, it works without JavaScript, and it updates the URL fragment and the browser’s sequential focus starting point, so the next Tab press continues from the top of the page. The icon is inline SVG with aria-hidden, and the accessible name comes from aria-label. If you prefer a visible word, write “Back to top” as text and skip the label.

Turn on smooth scrolling in CSS

The jQuery version animated scrollTop over 800 ms. The browser now does this for you with scroll-behavior, which is Baseline widely available. Set it on the root element, and only for people who have not asked for reduced motion:

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

This affects every in-page anchor jump, so your table-of-contents links glide as well. Two details matter. A value set on body does not reach the viewport, so it must be on html (:root). And it only changes navigation and scripted scrolling, never the reader’s own wheel or touch scrolling. People with vestibular disorders can find long animated scrolls unpleasant, which is why the media query is not optional.

If you need smooth scrolling from JavaScript, the same behaviour is available as window.scrollTo({ top: 0, behavior: 'smooth' }). With behavior: 'auto' (the default) the browser follows the CSS property, so reduced-motion users are still covered. An explicit behavior: 'smooth' overrides the CSS, so if you force it, check the preference yourself:

const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
window.scrollTo({ top: 0, behavior: reduce ? 'auto' : 'smooth' });

For in-page links that land under a fixed header, add scroll-margin-top to the targets so they stop clear of it.

Style and position the button

Fixed positioning keeps the button in the corner. Logical properties (inset-inline-end) make it flip automatically in right-to-left languages, and env(safe-area-inset-*) keeps it clear of the home indicator on phones. Colors are custom properties in OKLCH, so a theme change is one edit.

:root {
  --accent: oklch(0.55 0.2 265);
  --accent-hover: oklch(0.45 0.2 265);
}

.to-top {
  position: fixed;
  inset-block-end: max(1rem, env(safe-area-inset-bottom));
  inset-inline-end: max(1rem, env(safe-area-inset-right));
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  box-shadow: 0 4px 14px rgb(0 0 0 / .25);

  /* hidden by default */
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity .25s, transform .25s, visibility .25s, background-color .2s;
}

.to-top[data-visible] {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover { background: var(--accent-hover); }
.to-top:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.to-top svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; transform: none; }
}

Hiding with opacity alone would leave an invisible link in the tab order, so keyboard users would land on a button they cannot see. Adding visibility: hidden removes it from both the tab order and the accessibility tree, and transitioning visibility alongside opacity keeps the fade intact: the element becomes visible at the start of the fade-in and hidden only at the end of the fade-out.

The old tutorial faded the button with a long hover transition and a Photoshop-made arrow image. Here the arrow is vector, scales with text size, and inherits currentColor. For more hover-state ideas, see CSS3 Gradient Buttons and Easy CSS Animation With Transition & Transforms.

Show it after scrolling with IntersectionObserver

The classic approach attached a function to the window’s scroll event and compared scrollTop to a number on every tick. An IntersectionObserver does the same job without running code on each scroll event. Place an invisible marker at the top of the page that is as tall as your threshold. While the marker is on screen, the reader is near the top and the button stays hidden; once it scrolls out, the button appears.

<span class="top-sentinel" data-top-sentinel aria-hidden="true"></span>
body { position: relative; }

.top-sentinel {
  position: absolute;
  inset: 0 auto auto 0;
  inline-size: 1px;
  block-size: 400px;   /* show the button after 400px of scrolling */
  pointer-events: none;
}
const toTop = document.querySelector('.to-top');
const sentinel = document.querySelector('[data-top-sentinel]');

if (toTop && sentinel) {
  new IntersectionObserver(([entry]) => {
    toTop.toggleAttribute('data-visible', !entry.isIntersecting);
  }).observe(sentinel);
}

That is the whole script. The guard clause means pages without the button do nothing, and if JavaScript fails to load the button simply stays hidden while the page remains fully usable. If you would rather the button be available without scripting, drop the hidden state and leave it always visible.

Top of an article page with no back-to-top button visible
Before: at the top of the page the button is hidden.
The same article scrolled down 1400 pixels with the round back-to-top button visible in the bottom right corner
After: once the sentinel scrolls out of view, the button fades in.

I tested this version in Chromium with a realistic article layout: the button is hidden at the top, visible after scrolling 1400 px, and a click returns to the top and hides it again.

Mobile view of the demo in dark mode, scrolled down, with the round back-to-top button in the bottom right
On a phone in dark mode. The button respects the safe area and uses the same accent color.

Optional: reveal it with CSS only

Scroll-driven animations let a CSS animation follow scroll position instead of time. Tie the animation to the root scroller and limit it to the first 400 px of scrolling. Treat this as a progressive enhancement over the observer version, not a replacement for it:

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .to-top {
      transition: background-color .2s;
      transform: none;
      animation: reveal linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 400px;
    }

    @keyframes reveal {
      from { opacity: 0; visibility: hidden; pointer-events: none; }
      to   { opacity: 1; visibility: visible; pointer-events: auto; }
    }
  }
}

The button now fades in as the reader scrolls the first 400 px, and fades back out on the way up. Declare animation-timeline after the animation shorthand, because the shorthand resets it. The pointer-events keyframes solve the half-faded problem: pointer-events flips at the midpoint of the range, so the button ignores clicks while it is less than half visible, and becomes clickable once it is more than half visible.

Article scrolled 200 pixels with the back-to-top button half faded in at the bottom right
The scroll-driven variant at 200 px of scroll: the button is at 50% opacity and about to become clickable.

I tested this variant in Chromium: the computed opacity was 0 at the top, 0.25 at 100 px, 0.5 at 200 px, 0.75 at 300 px and 1 from 400 px on, with pointer-events: none until the midpoint. A click at the bottom of the page returned to the top.

Browser support

Chrome and Edge have supported animation-timeline since version 115, and Safari since 26 (September 2025). Stable Firefox does not support it by default as of this writing; the MDN compatibility data lists Firefox 159, currently in beta, as the first version to ship it. MDN marks the property as “limited availability” in Baseline only because of Firefox, so that label will change once Firefox 159 reaches stable.

That is why the block sits inside @supports and why you should keep the earlier hidden-by-default CSS and the observer script. With the observer kept, browsers without scroll-driven animations (Firefox until 159) get the observer, and everyone else gets the scroll-driven fade. Check MDN’s compatibility table before you decide to drop the script.

Reduced motion

Wrap the animation in prefers-reduced-motion: no-preference, as the code above does. A fade is gentle, but the animation continuously changes opacity as the reader scrolls, and there is no cost to leaving it out. People who ask for reduced motion then get the observer version, whose transition is switched off by the earlier prefers-reduced-motion: reduce rule: the button simply appears and disappears.

Accessibility checklist

  • Name: an icon-only link needs aria-label (or visible text).
  • Focus: keep a clear :focus-visible outline with sufficient contrast against both the button and the page.
  • Hidden state: use visibility: hidden, not just opacity: 0.
  • Target size: 3rem (48 px) comfortably exceeds the 24 px minimum in WCAG 2.2 and suits touch.
  • Motion: gate smooth scrolling and transforms behind prefers-reduced-motion.
  • Overlap: make sure the fixed button does not cover cookie banners, chat widgets or the last lines of the footer. Add bottom padding to the footer if needed.

When you do not need a button

Short pages never need one. On long pages, a sticky header often serves the same purpose, and a table of contents helps readers move around better than a jump to the top. For another scroll-linked effect, see How to Zoom Hero Images on Scroll.

Migrating from the jQuery version

jQuery version Modern replacement
$(window).scroll() with scrollTop() > 100 IntersectionObserver on a sentinel element, or a scroll-driven animation
.fadeIn() / .fadeOut() CSS opacity and visibility transition toggled by a data attribute
.animate({ scrollTop: 0 }, 800) scroll-behavior: smooth on html, or scrollTo({ top: 0, behavior: 'smooth' })
return false on click Not needed: the native anchor does the work
Vendor-prefixed transitions, PNG arrow, -moz-border-radius Unprefixed CSS, inline SVG, border-radius

If you are still carrying jQuery for this alone, it is safe to remove. The wider shift from library-driven effects to native browser features is covered in jQuery Tutorials for Designers, and the older ScrollTo Posts With jQuery technique has the same native replacement: anchor links plus scroll-behavior, with scroll-margin-top to keep targets clear of a fixed header.

Putting it together

Place the link and the sentinel in your page template, the CSS in your stylesheet and the script at the end of the page (or load it with defer). There are no dependencies and no build step.

Free snippets for this topic

Ready-made Bootstrap 5 components with live preview and copy-ready code.

All buttons snippets
121 comments from the archive

  1. when pressed on “demo ” near “Take a look at this step” i got 404 error

    good, simple and in some cases useful tutorial

  2. It’s a great tutorial and it does scroll back to top on Chrome browser, thanks a lot. Unfortunately, it doesn’t scroll on my Firefox 4 and in the “Design & CSS” part, the demo link is broken. A quick fix would be highly appreciated.

    1. It should be working with Firefox now. I added the ‘html’ element in the animate function.

  5. I see that it uses Webkit transition but this doesn’t work in Firefox 4 or IE9

  8. I’ve used similar code except I animate on both the html and body elements. Seems to have better cross-browser compatibility.

    [code]
    $(‘span.tothetop’).click(function() {
    if($(window).scrollTop() > 0) {
    $(“html, body”).animate({scrollTop:”0px”},1000);
    }
    });
    [/code]

  10. Love the scrolltop / animate functions in jQuery, weird it never works well in Opera, but at least not many people use that thankfully.

    I’ve also always done $(‘html,body’).animate(….
    Not sure if the added html makes any difference though

    1. Hey, why thankfully?! The fact it doesn’t render these particular jQuery functions on this particular site doesn’t mean the whole browser is bad.

      P.s. By the way, before the redesign the scroll worked perfectly well in Operas 9-10. If the code remained unchanged only then it’s a browser related bug imho.

  12. Hello guys, I wrote a similar article, in Italian, on my blog recently :)

  14. When I saw your scroll to top button, I furiously tried to figure out how to do it. After many attempts I did, but so glad to finally have all the info in one place! Thanks!

  16. Great post. Would the issue @Sawyer brings up only come into play on really long pages? The example Resig uses is Twitter’s infinitely scrolling pages.

  17. I’ve a rather reverse implemention of this scroll. In our company website, web you open a portfolio page, browser automatically scrolls the content for making visitors feel that, they are in a microsite. Here is the sample
    $(window).load(function(){
    if($(“body#portfolio”).length == 1)
    {
    $(‘html, body’).animate({ scrollTop: 75 }, 500);
    }
    });

    And as a bonus scroll :)
    Here is a sample implementation for scroll to top & scroll to bottom

    $(“.up a”).click(function(){
    $(‘html, body’).animate({ scrollTop: 0 }, 500);
    });

    var pageHeight = $(document).height() + 250;

    $(“.down a”).click(function(){
    $(‘html, body’).animate({ scrollTop: pageHeight }, 500);
    });

  18. Beautiful job but I would remove the empty span tag and instead give the link some extra top padding and a background-image. Less mark-up. Yay!

  19. Nice article. One point I’d make is that you’re technically calling the document ready function twice.

    $(document).ready(function(){});

    is exactly the same as

    $(function () {});

    the second of which you call in the middle of your first document ready function.

  22. Doesn’t seem to work with JQuery 1.5.2 though… I had it working just fine with 1.4.3, which you included in the url…

    hmmmm….

    RN

  23. I use jquery autoscroll script, that way it can animate to many places on my page.

    The demo doesn’t work on my HTC Hero.

  24. Nice. Any chance of a “scroll to anchor” writeup? There are certainly some poor articles about that specific topic out there on the internets.

  25. In my opinion a better option is using an anchor link to the header element, sans-JavaScript. Just like in the 1990s.

    I think a lot of this sort of animation satisfies the developer or site owner more than the users. They just want to be at the top of the document. Doubly so if their browser happens to render the animation slowly. My phone also does these little animations on menus and it just means I have to wait for no reason before taking my next action.

    1. Interesting point there. Maybe we should disable any animated ‘frills’ on mobile devices. I would love to know what the ‘average’ user would vote about this. Unfortunately it is hard to get a ‘mass’ oppinion because average users will not be looking at sites where you can vote for your preference on a piece of web site functionality. BOO!

  26. Absolutely fantastic! Thanks a lot for sharing this.
    It’s very cool the effect. It’s also very clever that you are doing the fade-in fade-out also in JQuery and not only via CSS3 transition.

  27. Thanks for this I did something similar on an old site but made the page go to the right when you clicked on a link it was quite cool but took ages to load because the hole site was on one page

  28. Hmmm, since implementing this some weird things happen with my YouTube embedded video’s.

    If I scroll down, the arrow appears, all good. But if I scroll to top, my youtube video stops? That’s odd! I’m really sorry, I cannot share a link due to the site still being in development, but if you feel like ‘wtf?! I wanna help’, you can email me on [email protected] :)

  29. Thank for a nice script. I’ve already put it on my page:). I’ve tested it under Opera 11.10 and it works fine.

    1. Glad you likey. I didn’t write it, it was written by Matthew Ruten. Look for us both on Linked In!

  31. The code is nice and works properly. We are a website design company that specializes in Web Design for Doctors Only. Come check out our site when you get a chance. Thanks

  32. This is great … but on a similar topic does anyone know a good demo for a smooth scroll using java going down the page with links at the top … Something that I can just copy paste, my code hand is weak? I did a google search and the examples were as easy as I thought.

    Many thanks,
    Jay

  33. Recent surveys, children of depressed mothers’ negative patterns of activity occurring in different brain reveals. This is for children of mothers who take more risks in the future is going to have depression.

  34. This certainly does the trick, but the only problem I find with this method is that it takes 800 milliseconds to animate the scroll, so if you’re close to the top, the animation is leisurely, and if you’re at the footer of a very long page, the animation is completely indistinguishable. I’m sure there has to be a way to calculate the page length and use a derivative number as the scroll speed, right?

  35. Felicitaciones por el tutorial. No lo conocía y además de vistoso (como lo es todo lo de Jquery) es sumamente útil.
    Muchísimas gracias por el aporte

  38. didn’t work for me also, but only 2 days, and then… voila! (may it be an update? 11.10)

  39. It will be more useful if you put this arrow button on the right side at bottom. Because when you scroll down your mouse is already on the right hand side.

    1. I understand what you’re saying. That does seem to make more since. That’s where I’d put it on my site. But I don’t think I’ve ever used the actual scroll button; always the mouse wheel! :)

  41. Good script. I’ll be using it on my websites, thanks!

  42. I was looking for such kind of script. It will be using it.
    Thanks for the posting.

  44. Complaintagainst is a online Complaint Department. You can Submit your complaints Totally Free and get your voice heard!

  45. I got a similar script but to scroll to both sides (top and bottom), but that was for my previous site, I’m going to implement this in my current site, thanks for sharing! :)

  47. Hi, does this conflict with mootools? i have tried it on a site, but it’s not srolling smoothly on pages that are linked with mootools, it also doesn’t hide the image on these pages, any idea how i can fix this?

  48. Nice Stuff, had to move the click function id to “#back-top” rather than “#back-top_a” after inserting this into my site to get it to scroll. Before this edit, the button would hide and reappear but the page just snapped to the top with no animation. Looks great.

  49. Nice tip. But may I just add something I noticed. In your code:

    if ($(this).scrollTop() > 100) {
    $(‘#back-top’).fadeIn();
    }

    You’re calling “$(‘#back-top’).fadeIn();” almost on every scroll event. I know this isn’t such a performance hit. But some browsers seem to fire a lot of scroll events. I would rather cache the jQuery object and set a flag so that it doesn’t fadeIn() every time.

  50. i wrote similiar code a few days ago, it is really simple:

    $.extend( {
    scrollTo: function(param, duration, event){ // @param – scrollTop value or id of the element you want to scroll the page
    if(event) event.preventDefault();
    if(typeof param === “number” && isFinite(param))
    $(“html,body”).animate({scrollTop: param}, duration);
    else
    $(“html,body”).animate({scrollTop: $(param).offset().top}, duration);
    }
    });

    You can use it in this way:
    Scroll to photos

  51. I’m have a problem with the screen flickering when I click on the link to scroll back to the top. Any chances what might be cousing this. I do have the anchor points set in case of no js as a fall back so you can see the flick of the top then it scrolls…

  52. Cool. Wondering how do we make this work in Joomla. Thanks for the code download. we will try to experiment in a joomla article.

  53. Hello and my regards…
    What a wonder to meet such great person on the Net just by typing search term “CSS tips”. I always go through your sites… They inspired me to try my hand on pages with such design, such spirit.
    The wall is as sublime as the portfolio. You are a wonderful programmer and sharing your knowledge with us is a noble deed.

  54. Awesome tricks by jquery.. I really like this tutorial and very helpful for me…

    Thanks for post this add

  55. Thanks for sharing this code. Nice feature which is sure to find it’s way onto a site in the very near future.

  58. thank Your for this peace of code :)
    i was curious and tested this demo in IE 6.0,
    when I scrolled down it say “Stack overflow at line: 46” :D

  59. mmm… adding this page to my bookmarks! Thanks!
    PS… nice new theme (I haven’t been here in a while :)

  61. I’m completely new to jQuery- for the scrolling, can I scroll to anchor points rather than pixels? If so, how? Also, is I want to be able to scroll down, is there anything I need to change?

  62. I’m gonna use it, may be useful in my next project.

    Thank you, and keep the good work on !

  63. very useful. I use this method creat my own back to top links. But I can’t understand why there’s a return false sentence in the jQuery? What’s the function?

  64. Cool and amazing jquery effect. Though done it many times, this effect will be impressive. Thanks a lot.

  65. I added a this.blur() to the click. This de-select the link after it was clicked, which means if you scroll down again you won’t see a box around the link when it appears.

    $(‘#back-top a’).click(function () {
    $(‘body,html’).animate({
    scrollTop: 0
    }, 800);
    this.blur();
    return false;

  66. I am trying to get this implemented on my wordpress theme, but I think I am having issues since I am using jquery 1.6.1. All of my other plugins are working fine with the newer jquery – do you know what I need to change to make this work?

  68. Instead of using .hide() you could just set the element’s display property to none. Also aren’t $(function () {}); and $(document).ready(function(){}) the same thing? You can take one out.

  69. I just need this for my web site. It’s another tool for a professional web site designer and it can be expended for a fancy whole new menu appearing after the main disappear under windows scrolling.

  70. Help please, set it on a site with Joomla, looks great! But when the page is at the top for some reason the button is not faded out… =( What could be the problem?

  72. Isnt it neater to hide the link with CSS? I can still see the image flicker when I load the page..

  73. I was looking for it. Finally my search ends at your blog. Thanks for sharing animated scroll to top. I developed it using simple HTML. But animated effect really makes it awesome

  74. Love the script! It was really easy to use and falls back nicely to quirks mode in IE. It’s not beautiful in IE, but what is???

    I added a little opacity to soften it a bit and added display:none; to #back-top css. Why you ask? It was showing for a split second when the page loaded. I guess that is because my script was below the markup???

    Also, I wonder how this renders in IE6 since we have position: fixed…

    Thanks again, love this site!

    James Weaver

  75. Very cool, and very easy to use.
    Thank you so much!
    I want use it in many of my project!
    ;)

  76. Vielen vielen Dank für dieses Tutorial. Nach solch einer simplen Lösung habe ich gesucht!
    Thank you so much for this tutorial. After such a simple solution I was looking for!

  77. Cool, but where do i put it ? before/after what code ? please answer me on my blog or e-mail.

  78. hi, i tried using the code above but the #back-top shows.
    can you pls .figure out whats wrong with this code?

    #back-top {
    position: fixed;
    bottom: 30px;
    margin-left: -150px;
    }

    #back-top a {
    width:100px;
    display: block;
    img-align: center;

    /*transition*/
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
    }
    #back-top a:hover {
    color: #000;
    }

    /*arrow icon(span tag)*/
    #back-top span {
    width: 100px;
    height: 100px;
    dispaly: block;
    margin-bottom: 6px;
    background: #ddd url (arrow.jpg) no-repeat left left;

    /*rounded corners*/
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;

    /*transition*/
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
    }
    #back-top a:hover span{
    background-color: #777;
    }

    $(document).ready(function(){

    // hide #back-top first
    $(“#back-top”).hide();

    // fade in #back-top
    $(function () {
    $(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
    $(‘#back-top’).fadeIn();
    } else {
    $(‘#back-top’).fadeOut();
    }
    });

    // scroll body to 0px on click
    $(‘#back-top a’).click(function () {
    $(‘body,html’).animate({
    scrollTop: 0
    }, 800);
    return false;
    });
    });

    });

    im really confused … O.o

  80. I was looking for a hidden menu tutorial that would show my menu on scroll. I could not find one that I liked.

    I made some very minor modifations to your script, a little CSS tweaking to the navigation element ID on my site and it gave me just what I wanted for my hidden menu to show on scroll.

    I made a tutorial that is gives you credit for this awesome code and how to make it work as a hidden menu. You should be seeing traffic from that tutorial.

    Thanks for all the hard work and sharing with us all.

  81. Does anyone have a solution to make this work in IE6? I know how much that browser hates position:fixed… :)

    Any help would be much appreciated.

  82. Hi,

    You are a wiz with scripting, and the more I am reading your site the more I feel my own scripting skills are growing. Now, I know you offer all these files for free and I am very grateful for all you are giving back to the community, but could you possibly provide a couple of free templates I could test this script in? No, offense the headings/subheadings HTML file is not what I would call advanced.
    I am asking this, because I want to see how it fares in a full design template with CSS, images and the rest.
    Also do you think this could work on handheld devices?

    1. “Also do you think this could work on handheld devices?”

      I use this on a lot of websites. I’ve found that it doesn’t work well on my particular Android phone (1st generation Droid). Once the ‘top’ image appears it stays put there and not at the bottom of the screen.

      Also, it seems that the latest versions of FF and Opera don’t hide it on load, as the javascript would imply.

      1. “Also, it seems that the latest versions of FF and Opera don’t hide it on load, as the javascript would imply.”

        Instead of hiding #back-top with jQuery, you can “hide” it, with css:

        #back-top{
        display: none;
        }

        And now you can remove $(“#back-top”).hide(); from the js.

        Thanks for your tutorial btw!

  83. This is awesome. I was playing around with another tutorial and there was additional javascript and seemed more code than needed. Love that you explained it & I can use my own image with or without text. Thanks!

  85. Nice tutorial! Thanks for sharing this.
    I think the button should appear next to the scrollbar because this is where the mouse of the user is often, when she is scrolling on the page. Therfore I think the right bottom corner of the page is a good position for this link to the top pf the page.

  86. Actually it depends on the design of the page. I just saw your link here on this page and it makes sense – where it is. ;)

  89. That was amazing–thanks so much! :) Mine doesn’t wait until the scroll value is >100 to show up, though. It’s just there once you load the site. I mean, it’s not a big deal or anything, and I’m super grateful you put this up! But I was just wondering if it’s ’cause of something I did wrong?

  90. “Also, it seems that the latest versions of FF and Opera don’t hide it on load, as the javascript would imply.”

    “Instead of hiding #back-top with jQuery, you can “hide” it, with css:

    #back-top{
    display: none;
    }

    And now you can remove $(“#back-top”).hide(); from the js.”

    If I try to hide it with css (by “display: none;”) , button never appears even at the bottom of the page. In the tutorial version, on the contrary, it always appears as soon as the page is loaded.

    Any help would be appreciated

  91. This is sizzling concepts and i appreciate your help by mentioning the programming code…cheers…

  92. Great post! Thanks for the detailed instructions. Another way is by using http://www.scrolltotop.com , which would suit beginners. I however like the way you have described as it gives you more flexibility with the button position etc. for advanced users.

  93. I however like the way you have described as it gives you more flexibility with the button position etc. for advanced users.

  94. this code works well when i am using it in static website,but when i am working in asp.net environment the back to top scroll doesn’t works in ie7 .even it is not showing up,i am using jquery version 1.7.2

  95. thanks i was searching 4 such kind of script . . . easy 2 use . . . thank u once again :)

  97. i cant make this code to work!
    pasted the first part to my html and the second part to my css…
    no luck whatsoever…
    for now, im settling with the backtotop.com preset buttons…

    can anyone tell me what the hell im doing wrong?

  98. Great tutorial!
    This works in IE,FF an Chrome until last week, but from now it’s stop working in Chrome. Am I the only one with this problem?

  100. @Keisa: Any fix or workaround for this ? Don’t know what’s changed in chrome. Maybe selfhealing in the next update..?

  101. I got it to work but the span back to top png image is blank and it shows “SPAN<BACK TO TOP" text under it. I put the js code in the html. Any suggestions?

  102. Actually, I just had the id= code wrong. It’s working fine except there’s no arrow in the box. Which makes me think it’s not linking correctly to the png file. The link only goes in the css correct? I’ll figure it out.

    1. maybe u didn’t copy the arrow image, i downloaded the demo then copied the arrow image then paste…

  103. the download demo works without internet but for the program that i created it only works with internet, the download demo used but still working without internet, anyone? pls!

  104. if it doesn’t work, maybe u should take note of the margin-left: -150px; in the #back-top, maybe…

  105. I love this so much!! I was out searching for something similar to this back to the top button and everything here is EXACTLY what I needed to finish my project!! Thank you so much!

  106. Can any one convert this piece of code to Vanilla js (Pure js)? Just so i can understand how this all works?

  107. is this script working on xp?

    I use OSX and Windows 7 and it is working, but it dosn’t work with Windows xp?

  108. Thanks I really like this solution and have implemented this in my website. However I have noticed that if you click the ”Back to Top” button multiple times and then you try to scroll down it causes the window to keep scrolling back to the top. Any idea how to stop this happening anyone?

  109. acutally for animation part moving top to the webpage we need only this code

    $(‘button’).click(function(){
    $(‘body,html’).animate({
    scrollTop : 0
    },800);
    });

    and all other are css for button work…Thanks a lot for this great work admin… :)

  110. i think the button works the way the number of times you click…to avoid this use preventDefault option in jquery

    $(‘button’).on(‘click’ , function(e){
    e.preventDefault();
    //do your stuff here
    });

Comments are closed on this article.