Question

我在我的rails应用程序中添加了Bootstrap Carousel和Back to Top Button。一切都很完美。

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的Next Button翻页，而无需每次开始新页面时向上滚动以阅读下一页。

Rails的新手，请帮助：）

这是我的代码......

VIEWS （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>

Carousel Next具有Back to Top功能

1 个答案: