Table of Contents
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.
