JavaScript - textarea 滚动至顶部或底部

最新推荐文章于 2024-04-11 01:50:17 发布

Heismk

最新推荐文章于 2024-04-11 01:50:17 发布

阅读量1.4k

点赞数

分类专栏： HTML & CSS & JavaScript

本文链接：https://blog.csdn.net/qq_29761395/article/details/120639679

版权

JavaScript DOM操作滚动效果 textarea 事件处理

关键词由CSDN通过智能技术生成

HTML & CSS & JavaScript 专栏收录该内容

65 篇文章

订阅专栏

本文展示了如何使用JavaScript实现点击按钮平滑滚动到文本区域顶部和底部的功能。通过监听按钮点击事件，设置textarea元素的scroll属性，实现了平滑滚动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

示例

谷歌浏览器版本：Version 94.0.4606.71 (Official Build) (64-bit)

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            textarea {
                width: 300px;
                height: 400px;
            }
        </style>
    </head>
    <body>
        <textarea></textarea>
        <input type="button" id="scroll-to-top" value="Scroll To Top">
        <input type="button" id="scroll-to-bottom" value="Scroll To Bottom">

        <script type="text/javascript">
            window.onload = (event) => {
                // console.log(event)
                main()
            }
            
            function main() {
                const textarea = document.querySelector("textarea")
                const buttonScrollToTop = document.querySelector("#scroll-to-top")
                const buttonScrollToBottom = document.querySelector("#scroll-to-bottom")
                
                buttonScrollToTop.onclick = (event) => {
                    textarea.scroll({ top: 0, left: 0, behavior: "smooth" })
                    // textarea.scrollTop = 0 // 效果僵硬
                }
                
                buttonScrollToBottom.onclick = (event) => {
                    textarea.scroll({ top: textarea.scrollHeight, left: 0, behavior: "smooth" })
                    // textarea.scrollTop = textarea.scrollHeight // 效果僵硬
                }
            }
        </script>
    </body>
</html>