0

いくつかのセクションに分割された Web ページをスクロールできるページ arroys の中央に 2 つのスティック (UP と DOWN) を追加しようとしています。したがって、矢印は常に中央にあり、2 番目のセクションから最後のセクションに表示され、ページを上下にスクロールできます。

ここに画像の説明を入力

現在、ウェブページのトップに移動するボタンがあります

.content-wrap section .back-to-top {
    display: block;
    position: absolute;
    bottom: -65px;
    right: 10px;
    height: 36px;
    width: 36px;
    background: url(http://www.caddet-re.org/assets/images/Arrow_Circle_Up.gif);
    text-indent: -9999px;
    z-index: 2;
}
<a class="back-to-top" href="#main">Back to Top</a>

私に与える：

ここに画像の説明を入力

jsfiddleはこれです

セクションの構造は次のとおりです。

<div class="content-wrap">
     <section id="main">
      <!--content-->
      </section>

      <section id="portfolio">
      <!--content-->
     </section>
      ...
</div>
4

1 に答える 1

1

私はあなたのコードを少し変更しました：

http://jsfiddle.net/BorisDutkin1982/ZapgY/1/

それがあなたの言いたいことだと思います。「下へ」ボタンも追加できます。「矢印コンテナー」内にあることと、css パラメーターが「上へ」ボタンと同じであることを確認しtop:45%てbottom:45%ください。

2 番目のセクションの後にのみ矢印を表示する場合は、「スクロール」用のイベント リスナーを追加し、ユーザーがページをスクロールした場所を確認する必要があります。メソッドでそれを行うことができますscrollTop()...例のコード：

$(document).ready(
   function(){
      $("body").live(
         "scroll",
          function(){
             if($("body").scrollTop == NUMBER_OF_PIXELS_FROM_TOP_OF_THE_PAGE){
                $("arrow").show();
             }
          }
      );
   }
);

説明: スクロール アクションのリスナーを「body」に追加しました。ページの上部からの距離が 2 番目のセクションの位置である場合、ユーザーが本文/ページをスクロールするたびに - aroa を表示します

于 2013-02-26T16:10:03.373 に答える