1

例 「トップへ」ボタンが必要なサイトを作成していて、左上隅に配置したい (上の図のように)。これは私の（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 %} —&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 トリック (スムーズ スクロール) からのものです。これは私が思いついたものです：

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 に答える