How to create a scroll to top button | free scroll to top button blogtipsandtricks by Jayesh Padwal - July 19, 2020January 7, 20210 Table of Contents How to make back to top button in Html For a bloggerCreate scroll to top javascript in BloggerAdd Back to Top Button or Go to Top Button in BloggerBack to top button examples:-Style 1Style 2Style 3Style 4Style 5Style 6Style 7We describe each and every part of this article clearly but if you still have some doubt remaining in your find you can comment below to clear out that Or if you like the above article then don’t forget to subscribe for the latest updates. If you like the above article please share our article on social media. #blog and tricks #blogandtricks #scroll to top button #Button to top How to make back to top button in Html For a blogger Create scroll to top javascript in Blogger Button to top / Back to top / Go to top (^): Friends on any website or blogger you have seen with the up arrow at the bottom pressing this up arrow which reaches the top of the web page. You can also see this button on this page, on the right side of the bottom, pressing this will go to the top. It is very useful for website visitors, this feature saves the time of website visitors reaching the top by pressing this option Without its very old way of pressing the scroll button up to go to the top and it also takes time to get to the top, that’s why top websites today use a new way to go to the top button. Add Back to Top Button or Go to Top Button in Blogger It’s very easy to add scroll to top button Html in blogger, follow the steps below to add the back to top / go to top button. 1. Login | Sign in – to your blogger account 2. Select your blog on the blog you want to add the widget 3. Go to the Layout option 4. In the Layout option, there is an Add gadget option Select this (see in the image) 5. After selecting Add Gadget, a pop-up window will open (Add Gadget window) (see image) 6. Now select the “HTML / JavaScript” gadget After this, now select (copy) the Html button encoding of any of the styles given below that you want to add on your blog and paste in the HTML / javascript scroll to top of page Script in content-box (see the image below) Back to top button examples:- Scroll to top button jquery | Javascript scroll to top of div Style 1 HTML Code for Button to top Style 1 is below copy the code <!–BACK-TO-TOP-STARTS–> <div style=”position: fixed; z-index: 65535; right: 10px; bottom: 10px;”> <!—www.blogandtricks.in– > <a href=’#Top’ title=’Gp to Top’><img src=’https://1.bp.blogspot.com/-PEwjhJp-KMI/XxMXmotoIzI/AAAAAAAAVeU/9AdK4u8riHM3Ccgm6ham7Q82j946O73cACLcBGAsYHQ/w54-h54/%25E2%2580%2594Pngtree%25E2%2580%2594vector%2Bup%2Barrow%2Bicon_4224408.png’alt=”go” to top image” /></a> <!—www.blogandtricks.in– > <!–BACK-TO-TOP-STOPS–> Style 2 HTML Code for Button to top Style 2 is below copy the code <!–BACK-TO-TOP-STARTS–> <div style=”position: fixed; z-index: 65535; right: 10px; bottom: 10px;”> <!—www.blogandtricks.in– > <a href=’#Top’ title=’Gp to Top’><img src=’https://1.bp.blogspot.com/-j96dxi5BlBM/XxMXmivx6xI/AAAAAAAAVeY/KvtEPH3ND8YNTlVoBtiB2ts2-8ROANLhQCLcBGAsYHQ/w43-h43/%25E2%2580%2594Pngtree%25E2%2580%2594vector%2Bup%2Barrow%2Bicon_4232490.png’alt=”go” to top image” /></a> <!—www.blogandtricks.in– > <!–BACK-TO-TOP-STOPS–> Style 3 HTML Code for Button to top Style 3 is below copy the code <!–BACK-TO-TOP-STARTS–> <div style=”position: fixed; z-index: 65535; right: 10px; bottom: 10px;”> <!—www.blogandtricks.in– > <a href=’#Top’ title=’Gp to Top’><img src=’https://1.bp.blogspot.com/-dlq6CIHowsY/XxMZ-oC87jI/AAAAAAAAVek/7zLwqvGTsRkNawOZ6WPUoMPRGhq5t3aGACLcBGAsYHQ/w48-h48/download.png’alt=”go” to top image” /></a> <!—www.blogandtricks.in– > <!–BACK-TO-TOP-STOPS–> Style 4 HTML Code for Button to top Style 4 is below copy the code <!–BACK-TO-TOP-STARTS–> <div style=”position: fixed; z-index: 65535; right: 10px; bottom: 10px;”> <!—www.blogandtricks.in– > <a href=’#Top’ title=’Gp to Top’><img src=’https://1.bp.blogspot.com/-DXqP2vvJRYc/XxMZ-9dPDwI/AAAAAAAAVes/0rNTGrhqbXk3fn0gRwStTS49UpN-4b2FACLcBGAsYHQ/w38-h38/images%2B%25281%2529.png’alt=”go” to top image” /></a> <!—www.blogandtricks.in– > <!–BACK-TO-TOP-STOPS–> Style 5 HTML Code for Button to top Style 5 is below copy the code <!–BACK-TO-TOP-STARTS–> <div style=”position: fixed; z-index: 65535; right: 10px; bottom: 10px;”> <!—www.blogandtricks.in– > <a href=’#Top’ title=’Gp to Top’><img src=’https://1.bp.blogspot.com/-ld3JK6xiIiU/XxMZ–H3zQI/AAAAAAAAVeo/xTngg2fASyYerfBA1NMqG3byPCLcBxZEQCLcBGAsYHQ/w47-h47/images.png’alt=”go” to top image” /></a> <!—www.blogandtricks.in– > <!–BACK-TO-TOP-STOPS–> Style 6 HTML Code for Button to top Style 6 is below copy the code <!–BACK-TO-TOP-STARTS–> <div style=”position: fixed; z-index: 65535; right: 10px; bottom: 10px;”> <!—www.blogandtricks.in– > <a href=’#Top’ title=’Gp to Top’><img src=’https://1.bp.blogspot.com/-ITAaOtq-J_Y/XxMZ_p4q9RI/AAAAAAAAVew/L_ebmFj1FbEk_6qPir1F3QP1sxBl_9hlACLcBGAsYHQ/s0/jump%2Bto%2Btop.png’alt=”go” to top image” /></a> <!—www.blogandtricks.in– > <!–BACK-TO-TOP-STOPS–> Style 7 HTML Code for Button to top Style 7 is below copy the code <!–BACK-TO-TOP-STARTS–> <div style=”position: fixed; z-index: 65535; right: 10px; bottom: 10px;”> <!—www.blogandtricks.in– > <a href=’#Top’ title=’Gp to Top’><img src=’https://1.bp.blogspot.com/-BcBcjgec3jU/XxMadE_-iBI/AAAAAAAAVfA/0gwcrlcAC1gWT_FS5kIvzyeOXatv2CaFgCLcBGAsYHQ/w59-h59/images.jpg’alt=”go” to top image” /></a> <!—www.blogandtricks.in– > <!–BACK-TO-TOP-STOPS–> Note: – You can replace “right” with “left” if you want to show the button on the left side. Now save Fix and the blog is ready with the options Button to top / Back to top / Go to top. We describe each and every part of this article clearly but if you still have some doubt remaining in your find you can comment below to clear out that Or if you like the above article then don’t forget to subscribe for the latest updates. If you like the above article please share our article on social media. #blog and tricks #blogandtricks #scroll to top button #Button to top Share this:Click to share on WhatsApp (Opens in new window)Click to share on Twitter (Opens in new window)Click to share on Facebook (Opens in new window)Click to share on Reddit (Opens in new window)Click to share on LinkedIn (Opens in new window)Click to share on Pinterest (Opens in new window)Click to share on Telegram (Opens in new window)Click to share on Tumblr (Opens in new window) Related