js回到顶部

简介: js回到顶部

回到顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        width: 300px;
        height: 800px;
        background: linear-gradient(#FFF, #f45, #f67);
    }
    button {
        position: fixed;
        bottom: 10px;
    }
</style>
<body>
    <div>
        <button id="but">回到顶部</button>
    </div>
    <script>
        document.getElementById('but').onclick = function () {
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        }
    </script>
</body>
</html>
相关文章
|
10月前
|
JavaScript 前端开发 小程序
js vue实现回到顶部动画效果
js vue实现回到顶部动画效果
|
9月前
|
JavaScript 前端开发 开发者
JavaScript的变量提升是一种编译阶段的行为,它将`var`声明的变量和函数声明移至作用域顶部。
【6月更文挑战第27天】JavaScript的变量提升是一种编译阶段的行为,它将`var`声明的变量和函数声明移至作用域顶部。变量默认值为`undefined`,函数则整体提升。`let`和`const`不在提升范围内,存在暂时性死区。现代实践推荐明确声明位置以减少误解。
58 2
|
9月前
|
JavaScript 前端开发
JavaScript中的变量提升(Hoisting)将`var`声明和函数声明提前到作用域顶部,允许在声明前使用
【6月更文挑战第25天】JavaScript中的变量提升(Hoisting)将`var`声明和函数声明提前到作用域顶部,允许在声明前使用。`let`和`const`不完全提升,存在暂时性死区(TDZ),尝试在初始化前访问会出错。函数声明会被提升,但函数表达式不会。
65 3
|
10月前
|
前端开发 JavaScript UED
CSS顶部与JS后写:网页渲染的奥秘
CSS顶部与JS后写:网页渲染的奥秘
|
JavaScript
js监听页面或元素scroll事件,滚动到底部或顶部
js监听页面或元素scroll事件,滚动到底部或顶部
1364 0
js监听页面或元素scroll事件,滚动到底部或顶部
|
10月前
|
JavaScript
js回到顶部
js回到顶部
57 0
|
前端开发 JavaScript
JavaScript缓慢滚动到页面顶部——电梯导航栏fixed定位
当页面内容过多时,浏览网页时滚动距离会变大,当你想回看上面的内容时,需要用鼠标滚轮或拉动滚动条来移动回去。这时如果网页设置电梯导航栏会提高网页阅读的方便性和高效性,我们只需要操作电梯导航栏上面的功能,就能去想要的模块,比如点击返回顶部按钮后会调转到页面顶部。
436 0
JavaScript缓慢滚动到页面顶部——电梯导航栏fixed定位
|
JavaScript 前端开发
js实现悬浮按钮并回到页面顶部
js实现悬浮按钮并回到页面顶部
529 0
通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二)...
通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二)...
通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部(一)...
通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部(一)...

热门文章

最新文章