全屏div滚动到下一页ruby rails?

时间:2015-09-16 11:41:20

标签: jquery html ruby-on-rails scroll

我昨天发布了同样的问题,但意识到我的问题太模糊了?

基本上这就是我希望我的代码工作的方式 - 我想要一个全屏div滚动/当我点击' down'我希望它向下滚动到我的下一个全屏div

我的代码有效 - 但它没有滚动'下 ?而且我不确定原因。

有人可以帮忙吗?

我正在使用的jquery代码是

<script type="text/javascript">
 $(document).ready(function() {

 $('.tile a').click(function(event) {
var id = $(this).attr("href");

 $('html, body').animate({scrollTop:target}, 10000);
 event.preventDefault();
 });
 });
 </script>

css代码

body,html {
text-align: center;
width: 100%;
height: 100%;
}


.tile {
height: 100%;
width: 100%;
position: relative;
background-color: #eaeaea;
}

.tile div {
padding-top: 70px;
}

#up {
 background-color: #222;
 }

和我的.erb代码

<%## scroll up page ##%>
<div class='tile' id='up'>
<%## search bar ##%>
<div class="row">
<div class="col-lg-3">
</div>

<div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->


<div class=but_down style="width:100px; height:100px; background-color:red;"> 
<a href="#down"> down </a> 
</div>
</div>
<%## scroll down page ##%>
 <div class='tile' id='down'>
 <h1> yeah </h1>
 </div>

我已经知道了 http://alvarotrigo.com/blog/fullpage-jquery-plugin-for-fullscreen-scrolling-websites/

但我真的,真的是编程的新手,不知道如何翻译它 ruby rails的代码。

有人可以帮忙吗?

0 个答案:

没有答案