带有返回顶部功能的下一个轮播

Question

我在我的 rails 应用程序中添加了 Bootstrap Carousel 和一个返回顶部按钮。一切都很完美。

Is there anyway in which I can combine Bootstraps Carousel's Next Button 
with my Back to Top button? Or perhaps add this functionality to the Carousel 
Next Buttons?

允许用户使用 Carousel 的“下一页”按钮翻页，而无需在每次开始新页面时向上滚动以阅读下一页。

Rails 新手，请帮忙 :)

这是我的代码...

视图 (Show.html.erb)

<div id="top"></div>
<div id="message">
  <a href="#"><%= image_tag("Back_to_Top.png", alt: "rss feed") %></a>
</div>

<div class="row">
  <div class="span12">

  <div class="container fill">
  <div id="myCarousel" class="carousel slide">

    <div class="carousel-inner">
      <div class="active item">
        <div class="fill" style="background-image:url('//placehold.it//000000/FFF');">
          <div class="container">
            <div class="center"><%= image_tag @book.titlephoto.url(:original) %></div>
          </div>
        </div>
      </div>

      <% unless @book.book_images.blank? %>
      <% @book.book_images.each do |image| %>
        <div class="item">
          <div class="fill" style="background-image:url('//placehold.it/1024x700/000000');">
            <div class="container">
              <div class="center"><%= image_tag image.page.url(:original) %></div>
            </div>
          </div>
        </div>
      <% end %>
      <% end %>
    </div>

    <div class="pull-center">
      <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
    </div>

  </div>
  </div>

  </div>
</div>

Answer 1

我最终自定义了 carousel.js 并像这样添加了 scrollTop(0)。

Carousel.prototype.next = function () {
  if (this.sliding) return
  return this.slide('next').scrollTop(0)
}

Carousel.prototype.prev = function () {
  if (this.sliding) return
  return this.slide('prev').scrollTop(0)
}

这两行也可以改

<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>

至此....

<a class="carousel-control left" href="#myCarousel" onclick="$(this).closest('.carousel').carousel('prev').scrollTop(0)">‹</a>
<a class="carousel-control right" href="#myCarousel" onclick="$(this).closest('.carousel').carousel('next').scrollTop(0)">›</a>