{"id":322209,"date":"2020-10-05T07:43:12","date_gmt":"2020-10-05T14:43:12","guid":{"rendered":"https:\/\/css-tricks.com\/?p=322209"},"modified":"2020-10-05T07:43:13","modified_gmt":"2020-10-05T14:43:13","slug":"how-to-make-an-unobtrusive-scroll-to-top-button","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/how-to-make-an-unobtrusive-scroll-to-top-button\/","title":{"rendered":"How to Make an Unobtrusive Scroll-to-Top Button"},"content":{"rendered":"\n<p>A button to return to the top of the page allows the user to quickly return to the top of the page without making too much effort. This can be very useful when the page has a lot of content or which happens, for example, on one page websites, when infinite scrolling is used, or on mobile devices where different screen sizes can cause the content to scroll extend.<\/p>\n\n\n\n<p>Those buttons usually float in the bottom corner of sites and then take you back to the top of the page when clicked. They are pretty easy to create with JavaScript. But visually, we are looking for it to be non-obtrusive while still being a large enough target to tap or click. Let\u2019s look at a few ways we can do this, starting simple, then improving things as we go.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"option-1-keep-it-simple\">Option 1: Keep it simple<\/h3>\n\n\n<p>First, we select the button in JavaScript.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">var scrollToTopBtn = document.getElementById(\"scrollToTopBtn\")<\/code><\/pre>\n\n\n\n<p>Now <code>document.documentElement<\/code> returns the root element of the document. We need it to get the offset values. So, next let\u2019s save it in a variable called <code>rootElement<\/code> \u2014 that way it\u2019s easier to call in the code.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">var rootElement = document.documentElement<\/code><\/pre>\n\n\n\n<p>We&#8217;ll add a click event listener to the button:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">function scrollToTop {\n\u00a0 \/\/ scroll to top logic\n}\n\nscrollToTopBtn.addEventListener(\"click\", scrollToTop)<\/code><\/pre>\n\n\n\n<p>Then, inside the <code>scrollToTop<\/code> function, we will make it scroll to the top of the screen with the <code>scrollTo<\/code> method.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">function scrollToTop() {\n\u00a0 \/\/ Scroll to top logic\n\u00a0 rootElement.scrollTo({\n\u00a0 \u00a0 top: 0,\n\u00a0 \u00a0 behavior: \"smooth\"\n\u00a0 })\n}<\/code><\/pre>\n\n\n\n<p>We can style the button up a bit as well:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">#scrollToTopBtn {\n\u00a0 background-color: black;\n\u00a0 border: none;\n\u00a0 border-radius: 50%;\n\u00a0 color: white;\n\u00a0 cursor: pointer;\n\u00a0 font-size: 16px;\n\u00a0 line-height: 48px;\n\u00a0 width: 48px;\n}<\/code><\/pre>\n\n\n\n<p>Now we\u2019re able to drop the button somewhere down the page, say, the footer:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;footer>\n\u00a0 &lt;!-- Scroll to top button -->\n\u00a0 &lt;button id=\"scrollToTopBtn\">&#x261d;&#xfe0f;&lt;\/button>\n&lt;\/footer><\/code><\/pre>\n\n\n\n<p>And we get this:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_bGpxyEM\" src=\"\/\/codepen.io\/anon\/embed\/bGpxyEM?height=450&amp;theme-id=1&amp;slug-hash=bGpxyEM&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed bGpxyEM\" title=\"CodePen Embed bGpxyEM\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"option-2-detecting-the-scroll-position\">Option 2: Detecting the scroll position<\/h3>\n\n\n<p>We can detect scrolling with a scroll event listener.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">function handleScroll() {\n\u00a0 \/\/ Do something on scroll\n}\ndocument.addEventListener(\"scroll\", handleScroll)<\/code><\/pre>\n\n\n\n<p>The <code>handleScroll<\/code> function will be called every time the user scrolls. Now we need the total number of pixels we can scroll.<\/p>\n\n\n\n<ul><li><code>scrollHeight<\/code> gives the height of an element, including the part not visible due to overflow.<\/li><li><code>clientHeight<\/code> gives the inner height of an element in pixels, which is the height of the visible part.<\/li><\/ul>\n\n\n\n<p>If we subtract <code>scrollHeight<\/code> by <code>clientHeight<\/code>, we get the total amount of pixels that we can scroll:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">var scrollTotal = rootElement.scrollHeight - rootElement.clientHeight<\/code><\/pre>\n\n\n\n<p>Now we have a variable called <code>scrollTotal<\/code> that represents the maximum number of pixels that can be scrolled vertically. By dividing the amount scrolled by the total amount of pixels we can scroll, we get a ratio between 0 and 1. Playing with this ratio, we can easily toggle the button on and off.<\/p>\n\n\n\n<p>For example, we will add a condition that shows the scroll-to-top button when the user has scrolled 80%, (or a ratio of 0.80) down the total height of the page. 80% is an arbitrary number. Basically, the closer we get to 1, the more the user has to scroll before seeing the button.<\/p>\n\n\n\n<p>Here\u2019s the JavaScript:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">var rootElement = document.documentElement\n\u2028\nfunction handleScroll() {\n\u00a0 \/\/ Do something on scroll\n\u00a0 var scrollTotal = rootElement.scrollHeight - rootElement.clientHeight\n\u00a0 if ((rootElement.scrollTop \/ scrollTotal ) > 0.80 ) {\n\u00a0 \u00a0 \/\/ Show button\n\u00a0 \u00a0 scrollToTopBtn.classList.add(\"showBtn\")\n\u00a0 } else {\n\u00a0 \u00a0 \/\/ Hide button\n\u00a0 \u00a0 scrollToTopBtn.classList.remove(\"showBtn\")\n\u00a0 }\n}\n\u2028\ndocument.addEventListener(\"scroll\", handleScroll)<\/code><\/pre>\n\n\n\n<p>We&#8217;re going to want some CSS to position the button correctly when it comes into view:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.scrollToTopBtn {\n\u00a0 \/* same general styles as before *\/\n\u00a0\u00a0\n\u00a0 \/* place it at the bottom-right corner *\/\n\u00a0 position: fixed;\n\u00a0 bottom: 30px;\n\u00a0 right: 30px;\n\u2028\n\u00a0 \/* keep it at the top of everything else *\/\n\u00a0 z-index: 100;\n\u2028\n\u00a0 \/* hide with opacity *\/\n\u00a0 opacity: 0;\n\u2028\n\u00a0 \/* also add a translate effect *\/\n\u00a0 transform: translateY(100px);\n\u2028\n\u00a0 \/* and a transition *\/\n\u00a0 transition: all .5s ease\n}\n\u2028\n.showBtn {\n\u00a0 opacity: 1;\n\u00a0 transform: translateY(0)\n}<\/code><\/pre>\n\n\n\n<p>With that, the button appears when the user gets 80% down the page and then hides when it\u2019s higher than that.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GRZOWwp\" src=\"\/\/codepen.io\/anon\/embed\/GRZOWwp?height=450&amp;theme-id=1&amp;slug-hash=GRZOWwp&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GRZOWwp\" title=\"CodePen Embed GRZOWwp\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This seems like a grand option, and setting an event listener to do this is pretty easy. But the performance overhead can be costly since we\u2019re always checking the current scroll position.<\/p>\n\n\n\n<p>There\u2019s another option that takes care of this\u2026<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"option-3-intersection-observer\">Option 3: Intersection Observer<\/h3>\n\n\n<p>The Intersection Observer API is an excellent solution to the above problem. It\u2019s a fairly recent browser API that lets developers hand most of these tasks off to the browser, in a way that is more optimized. Travis Almand wrote up a <a href=\"https:\/\/css-tricks.com\/an-explanation-of-how-the-intersection-observer-watches\/\">thorough explanation of how it works<\/a>. Here\u2019s how <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Intersection_Observer_API\" rel=\"noopener\">MDN<\/a> defines it:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>The Intersection Observer API provides a way to asynchronously observe changes for the intersection of a target element with an ancestor element or with a top-level document\u2019s viewport.<\/p><\/blockquote>\n\n\n\n<p>Pretty neat! That means the button can be our target element:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ We select the element we want to target\nvar target = document.querySelector(\"footer\");<\/code><\/pre>\n\n\n\n<p>We then write a callback function that does something when our element becomes \u201cintersects\u201d with the viewport \u2014 which is a fancy way of saying when it comes into view.<\/p>\n\n\n\n<p>And once the footer enters or leaves the viewport, all we really want to do is add or remove a class. The callback receives an array of entries as a parameter.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">function callback(entries, observer) {\n  \/\/ The callback will return an array of entries, even if you are only observing a single item\n  entries.forEach(entry => {\n    if (entry.isIntersecting) {\n      \/\/ Show button\n      scrollToTopBtn.classList.add('showBtn')\n    } else {\n      \/\/ Hide button\n      scrollToTopBtn.classList.remove('showBtn')\n    }\n  });\n}<\/code><\/pre>\n\n\n\n<p>We need to create a new <code>IntersectionObserver<\/code> instance and pass it the callback function we just wrote.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">let observer = new IntersectionObserver(callback);<\/code><\/pre>\n\n\n\n<p>Finally, we tell the observer to start watching (err, observing) the target element that was selected above for when it intersects with the viewport:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">observer.observe(target);<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WNwgBRg\" src=\"\/\/codepen.io\/anon\/embed\/WNwgBRg?height=450&amp;theme-id=1&amp;slug-hash=WNwgBRg&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WNwgBRg\" title=\"CodePen Embed WNwgBRg\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"and-what-about-smooth-scrolling\">And what about smooth scrolling?<\/h3>\n\n\n<p>Of course it\u2019s possible! In fact, Chris showed us how it can be done with CSS back in 2019:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;html id=\"top\">\n\u00a0 &lt;body>\n\u00a0 \u00a0 \u00a0&lt;!-- the entire document -->\n\u00a0 \u00a0 \u00a0&lt;a href=\"#top\">Jump to top of page&lt;\/a>\n\u00a0 &lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">html {\n\u00a0 scroll-behavior: smooth;\n}<\/code><\/pre>\n\n\n\n<p>There\u2019s a <em>little<\/em> more nuance to there, like accessibility enhancements that Chris also covers in the post. The point is that CSS is gaining new powers that can accomplish things that we used to use JavaScript for.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>There you have it! We started with a pretty simple idea. We enhanced it by displaying and hiding the button based on the user\u2019s scroll position. Then we improved the performance by implementing the Intersection Observer API instead of watching the current scroll position. And, finally, we saw how CSS can be used for smooth scrolling. All together, we get a scroll-to-top button that is easy to see and use, while not blocking other elements on the page.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A button to return to the top of the page allows the user to quickly return to the top of the page without making too much effort. This can be very useful when the page has a lot of content or which happens, for example, on one page websites, when infinite scrolling is used, or [&hellip;]<\/p>\n","protected":false},"author":278425,"featured_media":322220,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1488,1224,754],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/scroll-to-top.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":333276,"url":"https:\/\/css-tricks.com\/cancelable-smooth-scrolling\/","url_meta":{"origin":322209,"position":0},"title":"&#8220;Cancelable&#8221; Smooth Scrolling","date":"February 1, 2021","format":false,"excerpt":"Here's the situation: Your site offers a \"scroll back to top\" button, and you've implemented smooth scrolling. As the page scrolls back to the top, users see something that catches their eye and they want to stop the scrolling, so they do a smidge of a scroll on the mouse\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/scroll-to-top.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":335385,"url":"https:\/\/css-tricks.com\/a-super-flexible-css-carousel-enhanced-with-javascript-navigation\/","url_meta":{"origin":322209,"position":1},"title":"A Super Flexible CSS Carousel, Enhanced With JavaScript Navigation","date":"March 5, 2021","format":false,"excerpt":"Not sure about you, but I often wonder how to build a carousel component in such a way that you can easily dump a bunch of items into the component and get a nice working carousel \u2014 one that allows you to scroll smoothly, navigate with the dynamic buttons, and\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/scroll-snap-carousel.gif?fit=900%2C450&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":246599,"url":"https:\/\/css-tricks.com\/priority-navigation-scrolling-dropdowns\/","url_meta":{"origin":322209,"position":2},"title":"A Priority+ Navigation With Scrolling and Dropdowns","date":"October 18, 2016","format":false,"excerpt":"The following is a guest post by Micah Miller-Eshleman. Micah designed a variation of the \"Priority+ Navigation\" concept and uses it in production at the college he works for. I always dig a show & tell behind the thinking and creation of a design pattern, especially when it's working out\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":337295,"url":"https:\/\/css-tricks.com\/creating-a-smart-navbar-with-vanilla-javascript\/","url_meta":{"origin":322209,"position":3},"title":"Creating a Smart Navbar With Vanilla JavaScript","date":"April 5, 2021","format":false,"excerpt":"Sticky, or fixed, navigation is a popular design choice because it gives users persistent access to navigate the site. On the other hand, it takes up space on the page and sometimes covers content is a way that\u2019s less than appealing. A possible solution? Smart navigation. Let\u2019s define \u201csmart navigation\u201d\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/smart-nav.gif?fit=1000%2C500&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":260709,"url":"https:\/\/css-tricks.com\/can-get-pretty-far-making-slider-just-html-css\/","url_meta":{"origin":322209,"position":4},"title":"You can get pretty far in making a slider with just HTML and CSS","date":"October 12, 2017","format":false,"excerpt":"A \"slider\", as in, a bunch of boxes set in a row that you can navigate between. You know what a slider is. There are loads of features you may want in a slider. Just as one example, you might want the slider to be swiped or scrolled. Or, you\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":330827,"url":"https:\/\/css-tricks.com\/how-to-use-the-locomotive-scroll-for-all-kinds-of-scrolling-effects\/","url_meta":{"origin":322209,"position":5},"title":"How to Use the Locomotive Scroll for all Kinds of Scrolling Effects","date":"December 16, 2020","format":false,"excerpt":"I was recently looking for a way to perform scrolling effects on a project and I stumbled on the Locomotive Scroll library. It lets you perform a variety of scrolling effects, like parallax and triggering\/controlling animations at scroll points. You might also call it a \u201csmooth scrolling\u201d library, but it\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/scroll-to-top.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/322209"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/278425"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=322209"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/322209\/revisions"}],"predecessor-version":[{"id":322265,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/322209\/revisions\/322265"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/322220"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=322209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=322209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=322209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}