如何在左上角放置一个元素并使其作为“到顶部”按钮?

时间:2013-04-05 14:34:37

标签: jquery html css

Example 我正在创建一个需要“到顶部”按钮的网站,我想将它放在左上角(如上图所示)。这是我的(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>

底部的缩小脚本来自CSS Tricks(smooth scrolling)。这就是我想出的:

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

但它没有给我我想要的结果。该网站的大部分位于this Gist

1 个答案:

答案 0 :(得分:1)

您可以尝试执行以下操作:

HTML:

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

CSS:

body {
    position:   relative;
}

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