Back to Top Button of the Page in Blogger HTML Code

When you scroll down on a website, you may have noticed a button on the site that says Go Up or an arrow symbol. This code will give you the same functionality as in our blog. All you need to do is copy and paste the code into your layout HTML. You've probably seen a "back-to-top" button at the bottom-right corner on icon Clicking on that button takes you back to the top of the page. i.e If you scroll, the "back to top" button will appear and will stick at the bottom of the page. Click on it and you will get back to the top.

Go to your Blog and click Layout › Add a Gadget › HTML/JavaScript › Copy paste this Code below › Drag the Saved Script Down below towards the footer.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script> <br /><script><br />jQuery(document).ready(function() {<br />var offset = 220;<br />var duration = 500;<br />jQuery(window).scroll(function() {<br />if (jQuery(this).scrollTop() > offset) {<br />jQuery('.back-to-top').fadeIn(duration);<br />} else {<br />jQuery('.back-to-top').fadeOut(duration);<br />}<br />});<br />jQuery('.back-to-top').click(function(event) {<br />event.preventDefault();<br />jQuery('html, body').animate({scrollTop: 0}, duration);<br />return false;<br />})<br />});<br /></script><br /><style><br />div#page {<br />max-width: 900px;<br />margin-left: auto;<br />margin-right: auto;<br />padding: 20px;<br />}<br />.back-to-top {<br />position: fixed;<br />bottom: 2em;<br />right: 0px;<br />text-decoration: none;<br />color: #000000;<br />background-color: rgba(235, 235, 235, 0.80);<br />font-size: 12px;<br />padding: 1em;<br />display: none;<br />}<br />.back-to-top:hover {<br />text-decoration: none;<br />}<br /></style><br /><a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/a/AVvXsEg-bd7pd-BwjHPn8znkpJwyhyS-Q4NWckAyU505wwNxpOXvLU-CB3eWNYtUDFk5jSIH-7YtoswrrlwDWA54DKHfvmC-OYIzk_KTBmfwgdzyGpNytQ_xXZiaxWX4_jHoQo1Kqm8IvbwY76qUy93mRDreTO1qjI72eQ8ftWGlQjPustZElmPL9Qg5LJOK" <br />alt="Back to Top" /></a>

Customize img src with following preferred images. If you want change the button colour, copy the following any one code and paste on after  <img src="

1. Output Button:

https://blogger.googleusercontent.com/img/a/AVvXsEgdF-g6vRkQnDdseTHFriEv618pU4FUbXE5TFD4gIdzaEIWIXp9pJ-h62nrdWA0cOxR-frfA3V0rl3Cj8nWmfKKlZW8n-dL3YTKSgzyQKALibjnVoTRuBTEB3tbYz32BjC6pSpnzt64eL4w9ga-_P-4AtudNah-kgG39A3jrOBhFi7DLg-djnI2wL4_

2. Output Button:

https://blogger.googleusercontent.com/img/a/AVvXsEh3odf5SUFWuw1_BrxtBdEy8vCoxUucgjtWC7_qhUxD_wKpOcEvcB0ScAm1VmQf5XidxQKCxa6Icbf5zUSfQZz8F2gxrTYVQFM8VlEpuulxwDx4LAvNg6HNWCkso7H-zEWQMWi4oYGD51KuqzGfAWMWNhtVdGjCVvs8dA24dvp5GlpVqPKL_hRI8c1D

3. Output Button:

https://blogger.googleusercontent.com/img/a/AVvXsEgcEkgJT79-etXFutApPyHopjvDQLOY_n06uuMem2HlrpWKrtKr1RflxxXq2K4FhtJ_2udqDVp3PlDDH8_6QwaIffdvVRr6-YaEGAD92IfAqzQtdBY6Jiirh79pk8H_yM75JzkSEbYcsqafBXZHjjpez-hi3Ex5nkw55JPJUhnUdjSAfMO29oCRSeHO

4. Output Button:

https://blogger.googleusercontent.com/img/a/AVvXsEi5xg25NOrF1BOnGZV33tE9iJAWieZt3DEhPgDpwpOGm17Av1RITUxOJtteS0ihD-glvi1oTkIdTRpjKWKC8vJeizwUHFDhTjZ09E97uPz4_my3hoDDwwn8dpWIHArnPqptJyDRZ9PwovAvuA313QO7V_PoqcUX_HJwCg--OjZ03GgcAomdbpsnTo8s

5. Output Button: 

https://blogger.googleusercontent.com/img/a/AVvXsEjXFfXxmnVBdY8NcSI6RTvdddSluiMqRU9Esema9i0HF5XXXX8FdldlYxXHPAfsvExBM4TADZiqYmu93aS8TAAruYqTKvY0RtzSRlttygy4OTwG7bIEg2k0b02T6RejAjhaKs_UEChA8wqNxzZhjwblsaifFXubeRkD18LnEYve1O9E3NCR8xt0fpmJ

6. Output Button:

https://blogger.googleusercontent.com/img/a/AVvXsEhe8VrnBXE5OCTMmKtVgbOqqHuV-TWL1sYSWI-RQtcdjL4tjvXnvzo3hHosTdmSnTX0uO9pEivfY93iLDBXHW8vwq1tCsH9x4utRllnJPtR1iP2ML-Dmo2cfbP_G4qt_lipKLW5I72SwglhFL-E3EojTlw9Rt9gYFVkd1GahGXryO2HelL7GqYADR75

7. Output Button: 

https://blogger.googleusercontent.com/img/a/AVvXsEg-bd7pd-BwjHPn8znkpJwyhyS-Q4NWckAyU505wwNxpOXvLU-CB3eWNYtUDFk5jSIH-7YtoswrrlwDWA54DKHfvmC-OYIzk_KTBmfwgdzyGpNytQ_xXZiaxWX4_jHoQo1Kqm8IvbwY76qUy93mRDreTO1qjI72eQ8ftWGlQjPustZElmPL9Qg5LJOK