0

我正在尝试在页面中间添加两个粘贴（向上和向下），可以滚动分为某些部分的网页。所以箭头总是在中间出现在第二节到最后一节，让页面向上或向下滚动。

在此处输入图像描述

目前我有一个按钮可以将我带到网页顶部

.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%.

如果您只想在第二部分之后显示箭头，您需要为“滚动”添加一个事件侦听器并检查用户滚动页面的位置。你可以用scrollTop()方法来做到这一点......例如代码：

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

说明：我在“body”中添加了滚动动作的监听器。如果到页面顶部的距离是第二部分的位置，则每次用户滚动正文/页面时 - 显示箭头

于 2013-02-26T16:10:03.373 回答