实现div内部滚动条滚动到底部和顶部的代码

当div内部内容过多时，滚动条的出现可以方便用户查看更多内容，但通常情况下默认滚动条只提供基本滚动功能，可能不够方便用户使用。在实际开发中，有时我们需要实现div内部滚动条滚动到底部和顶部的功能，这里提供一些快捷实现的方式。

1. 滚动到底部

创建按钮

首先，我们需要创建一个可以触发滚动到底部功能的按钮。这个按钮可以通过触发事件来实现滚动。

<button id="sroll-to-bottom">滚动到底部</button>

使用JavaScript实现滚动

接着，我们使用JavaScript实现当点击按钮时，div内部滚动条自动滚动到底部。我们可以通过计算div的scrollHeight，并将其赋值给scrollTop来实现自动滚动到底部。

let bottomBtn = document.getElementById('scroll-to-bottom');
let div = document.getElementById('my-div');
bottomBtn.addEventListener('click', (e) => {
  div.scrollTop = div.scrollHeight;  
})

代码解析：

1. 获取“滚动到底部”按钮和目标div元素。
2. 监听按钮的点击事件。
3. 在事件处理函数中，通过将目标div的scrollTop属性设置为目标div的scrollHeight属性，实现div内部滚动条滚动到底部的效果。

示例代码：https://codepen.io/jnerados/pen/gOBMMxj

2. 滚动到顶部

创建按钮

同样地，我们创建一个可以触发滚动到顶部功能的按钮。

<button id="scroll-to-top">滚动到顶部</button>

使用JavaScript实现滚动

接着，我们使用JavaScript实现当点击按钮时，div内部滚动条自动滚动到顶部。我们可以直接设置scrollTop为0来实现滚动。

let topBtn = document.getElementById('scroll-to-top');
let div = document.getElementById('my-div');
topBtn.addEventListener('click', (e) => {
  div.scrollTop = 0;
})

代码解析：

1. 获取“滚动到顶部”按钮和目标div元素。
2. 监听按钮的点击事件。
3. 在事件处理函数中，通过将目标div的scrollTop属性设置为0，实现div内部滚动条滚动到顶部的效果。

示例代码：https://codepen.io/jnerados/pen/jOqOoOd

以上就是实现div内部滚动条滚动到底部和顶部的一些快捷实现方式，具体实现方法可以根据实际需要进行灵活选择。