如何使用JavaScript实现点击按钮控制滚动条向上滚动？

问题原因 #

你之前向下滚动功能正常就是因为正确使用了scrollTop += 30的逻辑，向上滚动失效核心原因是原生DOM元素不存在scrollBottom这个可读写属性，控制容器垂直滚动位置的标准属性只有scrollTop，代表滚动条顶部距离容器内容顶部的像素值：

• scrollTop数值增大，滚动条向下移动
• scrollTop数值减小，滚动条向上移动

修复方案 #

只需要修改向上箭头点击事件的逻辑即可，修正后的完整JS代码如下：

// 向下滚动按钮原有逻辑保持不变
document.getElementById( "my-scroll-top-button" ).onclick = () => {
  document.getElementById( "content-container" ).scrollTop += 30;
}
// 向上滚动按钮逻辑修改为对scrollTop做减法
document.getElementById( "my-scroll-buttom-button" ).onclick = () => {
  const container = document.getElementById( "content-container" );
  // 加Math.max避免scrollTop出现负值，逻辑更稳妥
  container.scrollTop = Math.max(0, container.scrollTop - 30);
}

额外优化建议 #

你的按钮ID存在拼写错误+语义歧义问题：向上滚动的按钮ID是my-scroll-buttom-button（正确拼写为bottom），向下滚动的按钮反而命名为my-scroll-top-button，后续维护容易混淆，建议调整为和功能匹配的命名，比如scroll-up-btn、scroll-down-btn。

内容的提问来源于stack exchange，提问作者Vishal Vishwakarma