0

I have added Bootstrap Carousel and a Back to Top Button to my rails app. Everything works perfect. 

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?

Allowing a user to turn the page with Carousel's Next Button, without having to scroll up to read the next page every time he starts a new page.

New to Rails, Please help :)

This is my code...

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">‹&lt;/a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">›&lt;/a>
    </div>

  </div>
  </div>

  </div>
</div>
4

1 回答 1

0

我最终定制了 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">‹&lt;/a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›&lt;/a>

对此……

<a class="carousel-control left" href="#myCarousel" onclick="$(this).closest('.carousel').carousel('prev').scrollTop(0)">‹&lt;/a>
<a class="carousel-control right" href="#myCarousel" onclick="$(this).closest('.carousel').carousel('next').scrollTop(0)">›&lt;/a>
于 2014-06-12T23:52:49.343 回答