You are here

How to create a scroll to top button | free scroll to top button

scroll-to-top-button
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)

add-a-gadget
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)

Confiure-html-java-script

Back to top button examples:-

Scroll to top button jquery | Javascript scroll to top of div

Style 1

Button-to-top
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

Button-to-top
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

Button-to-top
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

Button-to-top
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

Button-to-top
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

Button-to-top
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

Button-to-top
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

Leave a Reply

Top