2013-08-08 3 views
0

내 레일 앱에 부트 스트랩 캐 러셀과 맨 위 버튼을 추가했습니다. 모든 것이 완벽하게 작동합니다. 다음 페이지에게 그가 새로운 페이지를 시작할 때마다 읽어 스크롤 할 필요없이, 회전 목마의 다음 버튼이있는 페이지를 설정하는 사용자를 허용캐 러셀 다음으로 돌아 가기 기능

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? 

. 나는 사용자 정의를 종료

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

답변

0

새로운 레일에,이 내 코드입니다 :

도와주세요 ...

VIEWS (Show.html.erb) 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>