Question

这是我当前拥有的代码。我想做的就是单击按钮-向上移动-我希望area3中的文本向上移动50px。但是现在，它一直重新回到顶部。这是针对硬件分配的，如果需要说明的话，我们正在做一些非常基本的js / jquery？：）任何帮助将不胜感激！谢谢！

$("#moveUp").click(function(event){
  event.preventDefault();
  var scrollPos = $(".area").scrollTop();
  var newPos = scrollPos - 50;
  $(".area3").scrollTop(newPos);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="area3">
 blah blah
</div>
<div class="area4">
  <button id="moveUp">Move Up</button>
</div>

Answer 1

$("#moveUp").click(function(event){
    window.scrollTo(0, window.scrollY - 50)
})

window.scrollTo（x，y）是一种将屏幕滚动到给定坐标的方法，其中 x 是水平的，而 y 是垂直的。屏幕的左上角是 0，0 。比window.scrollY获取屏幕的当前垂直位置，您只需减去50即可从当前位置向上滚动50px

Answer 2

如果我没记错，我认为这可以为您提供帮助：

$("#moveup").click(function(){
        $(".area3").css({"margin-top":"-=50px"});
    });

Answer 3

如果您只想移动text中的area3，则应使用css来正确实现jQuery的这种行为，并使用animate()添加某些ease并带有平滑的动画到文本。

$("#moveUp").click(function(event){
  event.preventDefault();
  $('.area3').animate({
    position: 'absolute',
    bottom: +50
  }, 'slow');
})

.area3 {
  position: relative;
  height: 200px;
}

.area3 span {
  position: absolute;
  bottom: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="area3">
  <span>blah blah</span>
</div>
<div class="area4">
  <button id="moveUp">Move Up</button>
</div>

但是，如果您希望整个 window 都为scroll，则可以按照以下步骤使用相同的方法，即使用不同的 selectors body和html

$("#moveUp").click(function(event){
  event.preventDefault();
  $('body, html').animate({
    scrollTop: -50
  }, 500);
})

body, html {
  height: 1000px
}
.area3 {
  margin-top: 100px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="area3">
  <span>blah blah</span>
</div>
<div class="area4">
  <button id="moveUp">Move Up</button>
</div>

如果您想使用window interface 进行操作，则可以通过将上面的代码更改为

$("#moveUp").click(function(event){
  event.preventDefault();
  window.scrollTo(0, -50);
})

使用window的这种方法，您可以像上面一样使它平稳移动，不能使用 jQuery animate() API JavaScript会引发错误不要那样做。

当我单击按钮时，无法弄清楚如何在js中上下滚动50像素

3 个答案: