向下滚动使用按钮

Question

鉴于以下按钮：

<section id="section04" class="demo"> 
    <h1>Scroll Down Button #4</h1> 
    <a><span></span>Scroll</a> 
    </section> 

我怎样才能使按钮向下滚动页面上有一个特定的金额是多少？

Answer 1

使用jQuery动画

$("#section04").click(function(){ 
    $("html, body").stop().animate({ 
    scrollTop: 100px 
    },1000); 
}); 

更改100像素所需的任何值。

Answer 2

如果你想使用香草的JavaScript，你可以使用内置的方法scrollTo

窗口

//.html 

    <div style='height:4000px; border:solid red 2px; width:80%;'> 
     <input type='text' class='y' /> 
     <button>Scroll Y-axis</button> 
    </div> 

//.js 

    var button = document.querySelector('button') 

    button.addEventListener('click', function(){ 
     var y = document.querySelector('.y').value 
      window.scrollTo(0,y) 
    }) 

jsfiddle