1

例子 我正在创建一个需要“到顶部”按钮的网站,我想将它放在左上角(如上图所示)。这是我的(杰基尔)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 %} —&lt;/ul></nav>
    <section id="content">
      {{ content }}
    </section>
    <small id="soon">— More content soon —&lt;/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(平滑滚动)。这就是我想出的:

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

但它并没有给我想要的结果。大多数网站都在这个 Gist上。

4

1 回答 1

0

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

HTML:

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

CSS:

body {
    position:   relative;
}

#toTop {
    position:   absolute;
    top:        5px;
    left:       5px;
    text-align: left;
}
于 2013-04-05T14:47:17.780 回答