I need to add a "back to top" button on my website and I want to place it in the top left corner, as shown in the image above. Here is the HTML code I am using in my Jekyll site:
<body>
<a name="top"></a>
<a href="#top" id="toTop">TOP</a>
<header id="head"><span id="ruby">text</span> text</header>
<nav><ul>— {% for post in site.posts reversed %}{% if post.layout != 'no-title' %}
<li><a href="#{{ post.anchor }}">{{ post.title }}</a></li>
{% endif %}{% endfor %} —</ul></nav>
<section id="content">
{{ content }}
</section>
<small id="soon">— More content soon —</small>
<footer><!-- content --></footer>
<script>
<!-- script -->
$(document).ready(function(){$("a[href*=#]").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var a=$(this.hash);a=a.length&&a||$("[name="+this.hash.slice(1)+"]");if(a.length){var b=a.offset().top;$("html,body").animate({scrollTop:b},1000);return false}}})});
</script>
The minified script at the bottom is from CSS Tricks (smooth scrolling). Here is the CSS I have added:
a#toTop{
position: fixed;
top: 5px;
left: 5px;
text-align: left;}
Unfortunately, the results I am getting are not as expected. You can find most of the site's content on this Gist.