Mohammad Istanboli Mohammad Istanboli - 2 years ago 126
jQuery Question

how to make window auto scrolling using css?

Hello I have a design that is similar to this imageenter image description here

the red color is another div I want the window to auto scroll when hover over that little red part of the div so it go down till the whole div is shown so it should look like this

enter image description here

thanks in advance

A.J A.J
Answer Source

Something like this:

$(document).ready(function() {
  $('.scroll').on('mouseenter', function() {
    $("body").animate({
      scrollTop: $(this).offset().top
    }, 500);
  })
})
.red {
  background-color: #f00;
}
.green {
  background-color: #0f0;
}
.red,
.green {
  margin-bottom: 10px;
  height: 300px;
  position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red scroll"></div>
<div class="green scroll"></div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download