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);
});

将100px更改为任何所需的值。

Answer 2

如果你想使用vanilla 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

用按钮向下滚动

2 个答案: