{"id":201,"date":"2014-10-16T16:54:38","date_gmt":"2014-10-16T16:54:38","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=201"},"modified":"2025-06-19T07:37:56","modified_gmt":"2025-06-19T07:37:56","slug":"back-to-top-button-using-jquery-css","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/back-to-top-button-using-jquery-css\/","title":{"rendered":"Create Scroll Back to Top Button using jQuery and CSS"},"content":{"rendered":"<p>The <b>Back to Top<\/b> button allows the user to smoothly scroll back to the top of the page. It&#8217;s very useful to enhance the user experience of the website. When a web page has lots of content, this page needs a navigation option that takes the user to the top with a single click without much scrolling.<\/p>\n<p>This tutorial will show you how to create a <b>Back To Top button using jQuery and CSS<\/b>. This Back to Top button enhances the navigation experience of your website with long pages. After the browser window scrolls down, a button will automatically appear in the bottom-right corner of the content area. Once this button is clicked, the page will automatically scroll up. Through this button, the user can go back to the top section from the bottom section of the web page without manual page scrolling. So, the Back-To-Top button makes the navigation process quicker and easier.<\/p>\n<p>The jQuery Scroll to Top button can be built easily with CSS. You can easily create the Back to Top button using jQuery and CSS. Our example code provides an easy way to add a &#8220;back to top&#8221; button on your website using jQuery and CSS. This jQuery Scroll to Top plugin is an instant solution to integrate back-to-top button functionality into the web application.<\/p>\n<p>Follow the simple steps to <b>create scroll Back to Top button<\/b> for your website without using any third-party jQuery plugin.<\/p>\n<h2>Scroll To Top Button with jQuery<\/h2>\n<p><b>HTML Code:<\/b><br \/>\nDefine an HTML link element to display the Back-To-Top button on the webpage, which will take the user to the top of the webpage when clicked.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"javascript:void(0);\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"backToTop\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"back-to-top\"<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"arrow\"<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">i<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"arrow\"<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">i<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">a<\/span>&gt;<\/span><\/pre>\n<p><b>jQuery Library:<\/b><br \/>\nWe will use jQuery to handle the back-to-top button visibility and click event, so include the jQuery library first.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.6.1\/jquery.min.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p><b>JavaScript Code:<\/b><br \/>\nThe following JavaScript code handles the back-to-top button visibility and tracks the click event for auto-scroll.<\/p>\n<ul>\n<li>Select the button element by ID (<code>backToTop<\/code>).<\/li>\n<li>Use the <b>window scroll<\/b> event to detect whether the user scrolls the page down.\n<ul>\n<li>If the page is scrolled down more than 300 pixels, display the back-to-top button. Otherwise, hide the button.<\/li>\n<\/ul>\n<\/li>\n<li>Use the jQuery <code>click<\/code> event to detect whether the user clicks on the back-to-top button.\n<ul>\n<li>Set <code>scrollTop<\/code> to <code>0<\/code> in the <code>.animate()<\/code> method to scroll the page to the top using jQuery.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> btn = $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#backToTop'<\/span>);\r\n$(<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">window<\/span>).on(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'scroll'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> ($(<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">window<\/span>).scrollTop() &gt; <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">300<\/span>) {\r\n        btn.addClass(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'show'<\/span>);\r\n    } <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">else<\/span> {\r\n        btn.removeClass(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'show'<\/span>);\r\n    }\r\n});\r\nbtn.on(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'click'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">e<\/span>) <\/span>{\r\n    e.preventDefault();\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'html, body'<\/span>).animate({\r\n        scrollTop: <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>\r\n    }, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'300'<\/span>);\r\n});<\/pre>\n<p><b>CSS Code:<\/b><br \/>\nThe following CSS code is used to add some style to the back-to-top button.<\/p>\n<ul>\n<li>CSS media queries are used to make the back-to-top button responsive for the different screen sizes.<\/li>\n<li>Additionally, we have added some bounce animation with CSS <code>keyframes<\/code> rules to look the back-to-top button attractive.<\/li>\n<\/ul>\n<pre style=\"color: rgb(68, 68, 68);\"><span class=\"hljs-selector-class\" style=\"color: rgb(136, 0, 0);\">.back-to-top<\/span> {\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">position<\/span>: fixed;\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">bottom<\/span>: -<span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">40px<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">right<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">40px<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">display<\/span>: block;\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">width<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">50px<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">height<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">50px<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">line-height<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">50px<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">background<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">#335dff<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">color<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">#fff<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">text-align<\/span>: center;\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">text-decoration<\/span>: none;\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">border-radius<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">50%<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">opacity<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">0<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">-webkit-transform<\/span>: <span class=\"hljs-built_in\" style=\"color: rgb(57, 115, 0);\">scale<\/span>(0.3);\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">-ms-transform<\/span>: <span class=\"hljs-built_in\" style=\"color: rgb(57, 115, 0);\">scale<\/span>(0.3);\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">transform<\/span>: <span class=\"hljs-built_in\" style=\"color: rgb(57, 115, 0);\">scale<\/span>(0.3);\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">box-shadow<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">4px<\/span> <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">4px<\/span> <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">10px<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(57, 115, 0);\">rgba<\/span>(0, 0, 0, 0.2);\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">z-index<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">9<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">-webkit-transition<\/span>: all <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">0.3s<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">transition<\/span>: all <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">0.3s<\/span>;\r\n}\r\n<span class=\"hljs-selector-class\" style=\"color: rgb(136, 0, 0);\">.back-to-top<\/span><span class=\"hljs-selector-pseudo\" style=\"color: rgb(188, 96, 96);\">:focus<\/span> {\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">color<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">#fff<\/span>;\r\n}\r\n<span class=\"hljs-selector-class\" style=\"color: rgb(136, 0, 0);\">.back-to-top<\/span><span class=\"hljs-selector-class\" style=\"color: rgb(136, 0, 0);\">.show<\/span> {\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">bottom<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">40px<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">right<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">40px<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">opacity<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">1<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">-webkit-transform<\/span>: <span class=\"hljs-built_in\" style=\"color: rgb(57, 115, 0);\">scale<\/span>(1);\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">-ms-transform<\/span>: <span class=\"hljs-built_in\" style=\"color: rgb(57, 115, 0);\">scale<\/span>(1);\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">transform<\/span>: <span class=\"hljs-built_in\" style=\"color: rgb(57, 115, 0);\">scale<\/span>(1);\r\n}\r\n<span class=\"hljs-selector-class\" style=\"color: rgb(136, 0, 0);\">.back-to-top<\/span><span class=\"hljs-selector-class\" style=\"color: rgb(136, 0, 0);\">.show<\/span><span class=\"hljs-selector-pseudo\" style=\"color: rgb(188, 96, 96);\">:hover<\/span> {\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">color<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">#fff<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">bottom<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">30px<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">opacity<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">1<\/span>;\r\n}\r\n<span class=\"hljs-selector-class\" style=\"color: rgb(136, 0, 0);\">.arrow<\/span> {\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">background-image<\/span>: <span class=\"hljs-built_in\" style=\"color: rgb(57, 115, 0);\">url<\/span>(data:image\/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHN0eWxlPi5zdDB7ZmlsbDojZmZmfTwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTMxOS4xIDIxN2MyMC4yIDIwLjIgMTkuOSA1My4yLS42IDczLjdzLTUzLjUgMjAuOC03My43LjZsLTE5MC0xOTBjLTIwLjEtMjAuMi0xOS44LTUzLjIuNy03My43UzEwOSA2LjggMTI5LjEgMjdsMTkwIDE5MHoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzE5LjEgMjkwLjVjMjAuMi0yMC4yIDE5LjktNTMuMi0uNi03My43cy01My41LTIwLjgtNzMuNy0uNmwtMTkwIDE5MGMtMjAuMiAyMC4yLTE5LjkgNTMuMi42IDczLjdzNTMuNSAyMC44IDczLjcuNmwxOTAtMTkweiIvPjwvc3ZnPg==);\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">position<\/span>: absolute; <span class=\"hljs-attribute\" style=\"font-weight: 700;\">width<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">12px<\/span>; <span class=\"hljs-attribute\" style=\"font-weight: 700;\">height<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">12px<\/span>; <span class=\"hljs-attribute\" style=\"font-weight: 700;\">background-size<\/span>: contain;\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">transform<\/span>: <span class=\"hljs-built_in\" style=\"color: rgb(57, 115, 0);\">rotate<\/span>(-90deg);\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">top<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">30%<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">left<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">40%<\/span>;\r\n}\r\n<span class=\"hljs-selector-class\" style=\"color: rgb(136, 0, 0);\">.arrow<\/span><span class=\"hljs-selector-pseudo\" style=\"color: rgb(188, 96, 96);\">:nth-child(2)<\/span>{\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">top<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">42%<\/span>;\r\n}\r\n\r\n@<span class=\"hljs-keyword\" style=\"font-weight: 700;\">keyframes<\/span> bounceAlpha {\r\n    0% {<span class=\"hljs-attribute\" style=\"font-weight: 700;\">opacity<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">1<\/span>; <span class=\"hljs-attribute\" style=\"font-weight: 700;\">transform<\/span>: <span class=\"hljs-built_in\" style=\"color: rgb(57, 115, 0);\">rotate<\/span>(-90deg) <span class=\"hljs-built_in\" style=\"color: rgb(57, 115, 0);\">translateX<\/span>(0px) <span class=\"hljs-built_in\" style=\"color: rgb(57, 115, 0);\">scale<\/span>(1);}\r\n    25%{<span class=\"hljs-attribute\" style=\"font-weight: 700;\">opacity<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">0<\/span>; <span class=\"hljs-attribute\" style=\"font-weight: 700;\">transform<\/span>: <span class=\"hljs-built_in\" style=\"color: rgb(57, 115, 0);\">rotate<\/span>(-90deg) <span class=\"hljs-built_in\" style=\"color: rgb(57, 115, 0);\">translateX<\/span>(10px) <span class=\"hljs-built_in\" style=\"color: rgb(57, 115, 0);\">scale<\/span>(0.9);}\r\n    26%{<span class=\"hljs-attribute\" style=\"font-weight: 700;\">opacity<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">0<\/span>; <span class=\"hljs-attribute\" style=\"font-weight: 700;\">transform<\/span>: <span class=\"hljs-built_in\" style=\"color: rgb(57, 115, 0);\">rotate<\/span>(-90deg) <span class=\"hljs-built_in\" style=\"color: rgb(57, 115, 0);\">translateX<\/span>(-10px) <span class=\"hljs-built_in\" style=\"color: rgb(57, 115, 0);\">scale<\/span>(0.9);}\r\n    55% {<span class=\"hljs-attribute\" style=\"font-weight: 700;\">opacity<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">1<\/span>; <span class=\"hljs-attribute\" style=\"font-weight: 700;\">transform<\/span>: <span class=\"hljs-built_in\" style=\"color: rgb(57, 115, 0);\">rotate<\/span>(-90deg) <span class=\"hljs-built_in\" style=\"color: rgb(57, 115, 0);\">translateX<\/span>(0px) <span class=\"hljs-built_in\" style=\"color: rgb(57, 115, 0);\">scale<\/span>(1);}\r\n}\r\n\r\n<span class=\"hljs-selector-class\" style=\"color: rgb(136, 0, 0);\">.back-to-top<\/span><span class=\"hljs-selector-pseudo\" style=\"color: rgb(188, 96, 96);\">:hover<\/span> <span class=\"hljs-selector-class\" style=\"color: rgb(136, 0, 0);\">.arrow<\/span>{\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">animation-name<\/span>: bounceAlpha;\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">animation-duration<\/span>:<span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">1.4s<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">animation-iteration-count<\/span>:infinite;\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">animation-timing-function<\/span>:linear;\r\n}\r\n<span class=\"hljs-selector-class\" style=\"color: rgb(136, 0, 0);\">.back-to-top<\/span><span class=\"hljs-selector-pseudo\" style=\"color: rgb(188, 96, 96);\">:hover<\/span> <span class=\"hljs-selector-class\" style=\"color: rgb(136, 0, 0);\">.arrow<\/span><span class=\"hljs-selector-pseudo\" style=\"color: rgb(188, 96, 96);\">:nth-child(2)<\/span>{\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">animation-name<\/span>: bounceAlpha;\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">animation-duration<\/span>:<span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">1.4s<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">animation-delay<\/span>:<span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">0.2s<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">animation-iteration-count<\/span>:infinite;\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">animation-timing-function<\/span>:linear;\r\n}\r\n\r\n@<span class=\"hljs-keyword\" style=\"font-weight: 700;\">media<\/span> only screen and (max-width: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">575px<\/span>) {\r\n    <span class=\"hljs-selector-class\" style=\"color: rgb(136, 0, 0);\">.back-to-top<\/span> {\r\n        <span class=\"hljs-attribute\" style=\"font-weight: 700;\">width<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">40px<\/span>;\r\n        <span class=\"hljs-attribute\" style=\"font-weight: 700;\">height<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">40px<\/span>;\r\n        <span class=\"hljs-attribute\" style=\"font-weight: 700;\">line-height<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">40px<\/span>;\r\n    }\r\n    <span class=\"hljs-selector-class\" style=\"color: rgb(136, 0, 0);\">.back-to-top<\/span><span class=\"hljs-selector-class\" style=\"color: rgb(136, 0, 0);\">.show<\/span> {\r\n        <span class=\"hljs-attribute\" style=\"font-weight: 700;\">bottom<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">10px<\/span>;\r\n        <span class=\"hljs-attribute\" style=\"font-weight: 700;\">right<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">10px<\/span>;\r\n    }\r\n    <span class=\"hljs-selector-class\" style=\"color: rgb(136, 0, 0);\">.back-to-top<\/span><span class=\"hljs-selector-class\" style=\"color: rgb(136, 0, 0);\">.show<\/span><span class=\"hljs-selector-pseudo\" style=\"color: rgb(188, 96, 96);\">:hover<\/span> {\r\n        <span class=\"hljs-attribute\" style=\"font-weight: 700;\">bottom<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">10px<\/span>;\r\n    }\r\n    <span class=\"hljs-selector-class\" style=\"color: rgb(136, 0, 0);\">.arrow<\/span> {\r\n        <span class=\"hljs-attribute\" style=\"font-weight: 700;\">top<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">27%<\/span>;\r\n        <span class=\"hljs-attribute\" style=\"font-weight: 700;\">left<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">37%<\/span>;\r\n    }\r\n}<\/pre>\n<h2>jQuery BackToTop Button Script<\/h2>\n<p>The following script shows how you can integrate the back-to-top button on the web page.<\/p>\n<ul>\n<li>The HTML and JavaScript code integration part is provided in this code sample.<\/li>\n<\/ul>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-meta\" style=\"color: rgb(174, 115, 19);\">&lt;!DOCTYPE html&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"en-US\"<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">head<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">title<\/span>&gt;<\/span>jQuery Back To Top Button by CodexWorld<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">title<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"utf-8\"<\/span>&gt;<\/span>\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- jQuery library --&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.6.1\/jquery.min.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- Back-to-top button handler code --&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><span class=\"javascript\">\r\n$(<span class=\"hljs-built_in\" style=\"color: rgb(174, 115, 19);\">document<\/span>).ready(<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(95, 145, 130);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(174, 115, 19);\"><\/span>)<\/span>{\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(95, 145, 130);\">var<\/span> btn = $(<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">'#backToTop'<\/span>);\r\n    $(<span class=\"hljs-built_in\" style=\"color: rgb(174, 115, 19);\">window<\/span>).on(<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">'scroll'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(95, 145, 130);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(174, 115, 19);\"><\/span>) <\/span>{\r\n        <span class=\"hljs-keyword\" style=\"color: rgb(95, 145, 130);\">if<\/span> ($(<span class=\"hljs-built_in\" style=\"color: rgb(174, 115, 19);\">window<\/span>).scrollTop() &gt; <span class=\"hljs-number\" style=\"color: rgb(174, 115, 19);\">300<\/span>) {\r\n            btn.addClass(<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">'show'<\/span>);\r\n        } <span class=\"hljs-keyword\" style=\"color: rgb(95, 145, 130);\">else<\/span> {\r\n            btn.removeClass(<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">'show'<\/span>);\r\n        }\r\n    });\r\n    btn.on(<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">'click'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(95, 145, 130);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(174, 115, 19);\">e<\/span>) <\/span>{\r\n        e.preventDefault();\r\n        $(<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">'html, body'<\/span>).animate({\r\n            scrollTop: <span class=\"hljs-number\" style=\"color: rgb(174, 115, 19);\">0<\/span>\r\n        }, <span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">'300'<\/span>);\r\n    });\r\n});\r\n<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">head<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">body<\/span>&gt;<\/span>\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- BackToTop Button --&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"javascript:void(0);\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"backToTop\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"back-to-top\"<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"arrow\"<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">i<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"arrow\"<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">i<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">a<\/span>&gt;<\/span>\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- ++++++++++++ Page Body Content Goes Here ++++++++++++ --&gt;<\/span>\r\n\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">body<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">html<\/span>&gt;<\/span><\/pre>\n<p><span class=\"note\">Note that: <\/span>Don&#8217;t forget to add the CSS code to the script. Download the source code package to get all the code together.<\/p>\n<p class=\"seeAlso\"><span><\/span><a href=\"https:\/\/www.codexworld.com\/social-popup-page-scroll-using-jquery-css\/\">Social Popup on Page Scroll using jQuery and CSS<\/a><\/span><\/p>\n<h2>Conclusion<\/h2>\n<p>This tutorial provided a simple script to implement a back-to-top button on the web page. You can easily customize the scroll-to-top button appearance by modifying the CSS code. If you want to scroll any specific part of the web page, go through this tutorial &#8211; <a href=\"http:\/\/www.codexworld.com\/smooth-scroll-to-div-using-jquery\/\">Scroll to Specific Part of the Webpage using jQuery<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Back to Top button allows the user to smoothly scroll back to the top of the page. It&#8217;s very useful to enhance the user experience of the website. When a web page has lots <\/p>\n","protected":false},"author":1,"featured_media":5221,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6],"tags":[128,124,66,16,370],"class_list":["post-201","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-backtotop","tag-css","tag-javascript","tag-jquery","tag-scroll","cat-6-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Create Scroll Back to Top Button using jQuery and CSS - CodexWorld<\/title>\n<meta name=\"description\" content=\"Back-to-top button - Example code to create scroll-to-top button using jQuery and CSS. The smooth scroll to top button allows the user to scroll back to page top with jQuery.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/back-to-top-button-using-jquery-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Scroll Back to Top Button using jQuery and CSS - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Back-to-top button - Example code to create scroll-to-top button using jQuery and CSS. The smooth scroll to top button allows the user to scroll back to page top with jQuery.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/back-to-top-button-using-jquery-css\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2014-10-16T16:54:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-19T07:37:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/10\/create-scroll-back-to-top-button-using-jquery-css-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/back-to-top-button-using-jquery-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/back-to-top-button-using-jquery-css\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Create Scroll Back to Top Button using jQuery and CSS\",\"datePublished\":\"2014-10-16T16:54:38+00:00\",\"dateModified\":\"2025-06-19T07:37:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/back-to-top-button-using-jquery-css\\\/\"},\"wordCount\":556,\"commentCount\":14,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/back-to-top-button-using-jquery-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/10\\\/create-scroll-back-to-top-button-using-jquery-css-codexworld.png\",\"keywords\":[\"BackToTop\",\"CSS\",\"JavaScript\",\"jQuery\",\"Scroll\"],\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/back-to-top-button-using-jquery-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/back-to-top-button-using-jquery-css\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/back-to-top-button-using-jquery-css\\\/\",\"name\":\"Create Scroll Back to Top Button using jQuery and CSS - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/back-to-top-button-using-jquery-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/back-to-top-button-using-jquery-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/10\\\/create-scroll-back-to-top-button-using-jquery-css-codexworld.png\",\"datePublished\":\"2014-10-16T16:54:38+00:00\",\"dateModified\":\"2025-06-19T07:37:56+00:00\",\"description\":\"Back-to-top button - Example code to create scroll-to-top button using jQuery and CSS. The smooth scroll to top button allows the user to scroll back to page top with jQuery.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/back-to-top-button-using-jquery-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/back-to-top-button-using-jquery-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/back-to-top-button-using-jquery-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/10\\\/create-scroll-back-to-top-button-using-jquery-css-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/10\\\/create-scroll-back-to-top-button-using-jquery-css-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"create-scroll-back-to-top-button-using-jquery-css-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/back-to-top-button-using-jquery-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Scroll Back to Top Button using jQuery and CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create Scroll Back to Top Button using jQuery and CSS - CodexWorld","description":"Back-to-top button - Example code to create scroll-to-top button using jQuery and CSS. The smooth scroll to top button allows the user to scroll back to page top with jQuery.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codexworld.com\/back-to-top-button-using-jquery-css\/","og_locale":"en_US","og_type":"article","og_title":"Create Scroll Back to Top Button using jQuery and CSS - CodexWorld","og_description":"Back-to-top button - Example code to create scroll-to-top button using jQuery and CSS. The smooth scroll to top button allows the user to scroll back to page top with jQuery.","og_url":"https:\/\/www.codexworld.com\/back-to-top-button-using-jquery-css\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2014-10-16T16:54:38+00:00","article_modified_time":"2025-06-19T07:37:56+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/10\/create-scroll-back-to-top-button-using-jquery-css-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/back-to-top-button-using-jquery-css\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/back-to-top-button-using-jquery-css\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Create Scroll Back to Top Button using jQuery and CSS","datePublished":"2014-10-16T16:54:38+00:00","dateModified":"2025-06-19T07:37:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/back-to-top-button-using-jquery-css\/"},"wordCount":556,"commentCount":14,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/back-to-top-button-using-jquery-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/10\/create-scroll-back-to-top-button-using-jquery-css-codexworld.png","keywords":["BackToTop","CSS","JavaScript","jQuery","Scroll"],"articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/back-to-top-button-using-jquery-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/back-to-top-button-using-jquery-css\/","url":"https:\/\/www.codexworld.com\/back-to-top-button-using-jquery-css\/","name":"Create Scroll Back to Top Button using jQuery and CSS - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/back-to-top-button-using-jquery-css\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/back-to-top-button-using-jquery-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/10\/create-scroll-back-to-top-button-using-jquery-css-codexworld.png","datePublished":"2014-10-16T16:54:38+00:00","dateModified":"2025-06-19T07:37:56+00:00","description":"Back-to-top button - Example code to create scroll-to-top button using jQuery and CSS. The smooth scroll to top button allows the user to scroll back to page top with jQuery.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/back-to-top-button-using-jquery-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/back-to-top-button-using-jquery-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/back-to-top-button-using-jquery-css\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/10\/create-scroll-back-to-top-button-using-jquery-css-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/10\/create-scroll-back-to-top-button-using-jquery-css-codexworld.png","width":1366,"height":768,"caption":"create-scroll-back-to-top-button-using-jquery-css-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/back-to-top-button-using-jquery-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Create Scroll Back to Top Button using jQuery and CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/10\/create-scroll-back-to-top-button-using-jquery-css-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-3f","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/201","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=201"}],"version-history":[{"count":14,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/201\/revisions"}],"predecessor-version":[{"id":5802,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/201\/revisions\/5802"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/5221"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}