cssを使ってウィンドウを自動スクロールする方法は？

Question

こんにちは私は、全体のdivがあり、この画像

赤い色は、私が自動スクロールするウィンドウを別のdivたくさに似ているデザインは時にdiv要素のその小さな赤い部分の上にホバーそれがダウンしているまでそれはあなたが唯一のCSSを使用して、ウィンドウをスクロールすることはできません事前

Answer 1

このような何か：

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

Answer 2

にこの

おかげのようになりますように示します。

javascriptとscrollIntoViewメソッドを使用します。

簡単なデモ

document.querySelector('[data-scrollintoview]').addEventListener('mouseenter', function(e) { 
 
    e.target.scrollIntoView(true); 
 
});

.black { 
 
    background-color: #000; 
 
    margin-bottom: 20px; 
 
    height: 150px; 
 
} 
 
.red { 
 
    background-color: #f00; 
 
    height: 150px; 
 
}

<div class="black"></div> 
 
<div data-scrollintoview class="red"></div>