1

Example I'm creating a site which needs a "to the top" button and I want to position it in the top left corner (like above picture shows). This is my (Jekyll) HTML:

<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). This is what I came up with:

a#toTop{
position: fixed;
top: 5px;
left: 5px;
text-align: left;}

but it doesn't give me the results I want. Most of the site is at this Gist.

1 Answers1

1

You could try and do the following:

HTML:

<body>
    <a id="top"></a>
</body>

CSS:

body {
    position:   relative;
}

#toTop {
    position:   absolute;
    top:        5px;
    left:       5px;
    text-align: left;
}
halfpastfour.am
  • 5,764
  • 3
  • 44
  • 61
Lowkase
  • 5,631
  • 2
  • 30
  • 48
  • Great, thanks. It worked; I was expecting `position: fixed` for `#toTop` so I changed to that and it also worked. –  Apr 05 '13 at 14:49
  • 1
    Some additional information about anchors and the use of the `id` attribute and the `name` tag: http://stackoverflow.com/a/484781/540812. – halfpastfour.am Apr 05 '13 at 14:52