回到顶部JavaScript实现

青旅半醒 2022-05-27 12:29 284阅读 0赞

**html代码**

<div id="box"></div>

**css代码**

* {
                margin: 0;
                padding: 0;
            }
    
            body {
                height: 3000px;
            }
    
            #box {
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
                right: 0;
            }

**JS代码**

var oBox = document.getElementById("box");
        var timer = null;
        var iH = document.documentElement.clientHeight;
        oBox.style.top = iH / 2 - oBox.offsetHeight / 2 + "px";
        document.onscroll = function () {
            var iT = document.documentElement.scrollTop || document.body.scrollTop;
            var iTarget = Math.round(iH / 2) - Math.round(oBox.offsetHeight / 2) + iT;
    
            move(oBox, iTarget);
        };
    
        function move(obj, iTarget) {
            clearInterval(timer);
            timer = setInterval(function () {
                var speed = (iTarget - obj.offsetTop) / 8;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    
                if (obj.offsetTop == iTarget) {
                    clearInterval(timer);
                } else {
                    obj.style.top = obj.offsetTop + speed + 'px';
                }
            }, 30)
        }

发表评论取消回复

表情：

评论列表（有 0 条评论，284人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery实现回到顶部效果

css: <style> div { width: 100%; height:

朱雀/ 2022年09月14日 09:09/ 0 赞/ 196 阅读

相关 scroll-view 回到顶部

<scroll-view scroll-y :scroll-top="scrollTop" @scroll="scrollP"></scroll-view>

灰太狼/ 2022年09月02日 00:51/ 0 赞/ 257 阅读

相关回到顶部

[html元素固定定位fixed][html_fixed] 元素固定定位，比如：固定在右上角或者是在左下角，主流浏览器下，使用fixed就能实现，但是IE6不支持fixe

╰半夏微凉°/ 2022年06月02日 04:56/ 0 赞/ 302 阅读

相关快速回到顶部按钮

相信大部分做网页开发的都需要这个快速回到顶部按钮的功能吧，那么接下来我给出我觉得很简单的解决方法。直接给出demo： html页面： 1.<head></he

我不是女神ヾ/ 2022年05月27日 23:49/ 0 赞/ 474 阅读

相关回到顶部JavaScript实现

html代码 <div id="box"></div> css代码 { margin: 0;

青旅半醒/ 2022年05月27日 12:29/ 0 赞/ 285 阅读

相关 javascript瞬间回到顶部

window.onscroll = function() { //回到顶部 //拿到屏幕中被隐藏的高度 var top1 = document.do

桃扇骨/ 2022年01月24日 00:39/ 0 赞/ 306 阅读

相关回到顶部

<template> <div class=""> <div class="flexd"> <d

港控/mmm°/ 2021年12月19日 16:51/ 0 赞/ 404 阅读

相关回到顶部效果

锚链接优点：简单快速、没有兼容性问题缺点：视觉上不够直观，用户体验不够好用JavaScript制作回到顶部效果当滚动条滚动一定

Bertha 。/ 2021年10月19日 11:36/ 0 赞/ 436 阅读

相关回到顶部组件

回到顶部--组件 1.html 一个button足矣 <button class="back-to-top">返回顶部</button> 2.css 注

Myth丶恋晨/ 2021年10月09日 03:52/ 0 赞/ 426 阅读

相关 JS基础之实现回到顶部

首先需要引入tween.js动画库 ![70][] 点击该按钮,页面会回到顶部,并伴随一定动画 <!DOCTYPE html> <html lang="z

Dear 丶/ 2021年09月15日 19:42/ 0 赞/ 414 阅读