Javascript方法实现点击回到页面顶部

1:定义方法。

<script>
        // 点击按钮,返回顶部
        function toTop() {
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        }
</script>

2:使用方法,以button为例。

<button onclick="toTop()">返回顶部</button>

3:ok了。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用JavaScript实现回到页面顶部的动画效果。以下是一个简单的示例代码: ```javascript // 获取回到顶部按钮 var scrollToTopBtn = document.getElementById("scrollToTopBtn"); // 监听页面滚动事件 window.onscroll = function() { // 如果页面滚动超过100px,则显示回到顶部按钮,否则隐藏按钮 if (document.documentElement.scrollTop > 100 || document.body.scrollTop > 100) { scrollToTopBtn.style.display = "block"; } else { scrollToTopBtn.style.display = "none"; } }; // 监听回到顶部按钮的点击事件 scrollToTopBtn.onclick = function() { // 使用平滑滚动动画效果回到页面顶部 scrollToTop(0, 500); // 第一个参数为目标位置,第二个参数为滚动时间(毫秒) }; // 定义平滑滚动函数 function scrollToTop(to, duration) { if (duration <= 0) return; var difference = to - document.documentElement.scrollTop || document.body.scrollTop; var perTick = difference / duration * 10; setTimeout(function() { document.documentElement.scrollTop += perTick; document.body.scrollTop += perTick; if (document.documentElement.scrollTop === to || document.body.scrollTop === to) return; scrollToTop(to, duration - 10); }, 10); } ``` 在上面的代码中,首先获取了回到顶部按钮的元素,并监听了页面滚动事件。当页面滚动超过100px时,显示回到顶部按钮,否则隐藏按钮。点击回到顶部按钮时,调用`scrollToTop`函数实现平滑滚动动画效果回到页面顶部。该函数使用递归实现每隔10毫秒滚动一段距离,直到滚动到目标位置或滚动时间结束。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值