When you scroll down in a website you might have noticed a button at the site that says go back on top or Just a arrow symbol. This Code will give your the same functionality in our blog. All you have to do Copy paste the code in your Layout HTML.
i.e.
Go to :
Layout › Add a Gadget › HTML/JavaScript › Copypaste 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> <script> jQuery(document).ready(function() { var offset = 220; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.back-to-top').fadeIn(duration); } else { jQuery('.back-to-top').fadeOut(duration); } }); jQuery('.back-to-top').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false; }) }); </script> <style> div#page { max-width: 900px; margin-left: auto; margin-right: auto; padding: 20px; } .back-to-top { position: fixed; bottom: 2em; right: 0px; text-decoration: none; color: #000000; background-color: rgba(235, 235, 235, 0.80); font-size: 12px; padding: 1em; display: none; } .back-to-top:hover { text-decoration: none; } </style> <a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/a/AVvXsEg-bd7pd-BwjHPn8znkpJwyhyS-Q4NWckAyU505wwNxpOXvLU-CB3eWNYtUDFk5jSIH-7YtoswrrlwDWA54DKHfvmC-OYIzk_KTBmfwgdzyGpNytQ_xXZiaxWX4_jHoQo1Kqm8IvbwY76qUy93mRDreTO1qjI72eQ8ftWGlQjPustZElmPL9Qg5LJOK"alt="Back to Top" /></a>
Copied
Customize img src with following prefered images
https://blogger.googleusercontent.com/img/a/AVvXsEgdF-g6vRkQnDdseTHFriEv618pU4FUbXE5TFD4gIdzaEIWIXp9pJ-h62nrdWA0cOxR-frfA3V0rl3Cj8nWmfKKlZW8n-dL3YTKSgzyQKALibjnVoTRuBTEB3tbYz32BjC6pSpnzt64eL4w9ga-_P-4AtudNah-kgG39A3jrOBhFi7DLg-djnI2wL4_
https://blogger.googleusercontent.com/img/a/AVvXsEh3odf5SUFWuw1_BrxtBdEy8vCoxUucgjtWC7_qhUxD_wKpOcEvcB0ScAm1VmQf5XidxQKCxa6Icbf5zUSfQZz8F2gxrTYVQFM8VlEpuulxwDx4LAvNg6HNWCkso7H-zEWQMWi4oYGD51KuqzGfAWMWNhtVdGjCVvs8dA24dvp5GlpVqPKL_hRI8c1D
https://blogger.googleusercontent.com/img/a/AVvXsEgcEkgJT79-etXFutApPyHopjvDQLOY_n06uuMem2HlrpWKrtKr1RflxxXq2K4FhtJ_2udqDVp3PlDDH8_6QwaIffdvVRr6-YaEGAD92IfAqzQtdBY6Jiirh79pk8H_yM75JzkSEbYcsqafBXZHjjpez-hi3Ex5nkw55JPJUhnUdjSAfMO29oCRSeHO
https://blogger.googleusercontent.com/img/a/AVvXsEi5xg25NOrF1BOnGZV33tE9iJAWieZt3DEhPgDpwpOGm17Av1RITUxOJtteS0ihD-glvi1oTkIdTRpjKWKC8vJeizwUHFDhTjZ09E97uPz4_my3hoDDwwn8dpWIHArnPqptJyDRZ9PwovAvuA313QO7V_PoqcUX_HJwCg--OjZ03GgcAomdbpsnTo8s
https://blogger.googleusercontent.com/img/a/AVvXsEjXFfXxmnVBdY8NcSI6RTvdddSluiMqRU9Esema9i0HF5XXXX8FdldlYxXHPAfsvExBM4TADZiqYmu93aS8TAAruYqTKvY0RtzSRlttygy4OTwG7bIEg2k0b02T6RejAjhaKs_UEChA8wqNxzZhjwblsaifFXubeRkD18LnEYve1O9E3NCR8xt0fpmJ
https://blogger.googleusercontent.com/img/a/AVvXsEhe8VrnBXE5OCTMmKtVgbOqqHuV-TWL1sYSWI-RQtcdjL4tjvXnvzo3hHosTdmSnTX0uO9pEivfY93iLDBXHW8vwq1tCsH9x4utRllnJPtR1iP2ML-Dmo2cfbP_G4qt_lipKLW5I72SwglhFL-E3EojTlw9Rt9gYFVkd1GahGXryO2HelL7GqYADR75
https://blogger.googleusercontent.com/img/a/AVvXsEg-bd7pd-BwjHPn8znkpJwyhyS-Q4NWckAyU505wwNxpOXvLU-CB3eWNYtUDFk5jSIH-7YtoswrrlwDWA54DKHfvmC-OYIzk_KTBmfwgdzyGpNytQ_xXZiaxWX4_jHoQo1Kqm8IvbwY76qUy93mRDreTO1qjI72eQ8ftWGlQjPustZElmPL9Qg5LJOK
Comments
Post a Comment