Auto Scroll To Top can be add in your custom html code. Customize your layout to add html tag, css and java script. Insert the code inside and update preview if you did it correctly.
CSS Code: Put this before </head> tag. You can find it on top just scroll down a little.
<style type="text/css">
#toTop {
position:fixed;
bottom:80px;
right:80px;
cursor:pointer;
background:url(http://static.tumblr.com/fgfmpgh/M3zkzagj7/totop.png) no-repeat;
text-indent:-9999px;
width:51px;
height:51px;
}
</style>
Html Code: Put this before the </body> tag. You can find it near at the bottom.
<a href="#" id="toTop">^ Scroll to Top </a>
JavaScript Code: you can put it before or inside </html> you can find it at the end of the code.
<!-- Scroll -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/fgfmpgh/Qqfkzalyi/jquery.scroll.pack.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/fgfmpgh/7xukzalz8/jquery.easing.js"></script>
<script type="text/javascript">
$(function() {
$("#toTop").scrollToTop({speed:500,start:700});
});
</script>
<!-- / Scroll -->
thanks so much for the great code. on my site the scroll arrow flashes momentarily during load. do you have any idea what i can do to make that not happen?
thanks alot, very good tutorial
it didn’t work. I did the correct instruction of yours.
Plus, I tried to put the codes one by one. It still didn’t work. I tried to put all the codes and it still didn’t work. Ughh! This is just a waste of time.
Hi Selyka, It will work if you retype the code.
It works, thanks (:
Would love to use this, but could you tell me how I could add infinite scrolling to my theme?
Thanks!
Out of all the many I’ve tried, this was the first one that actually worked!
Thank you so much.