带动画的回到返回顶部

淩亂°似流年 2022-04-12 02:43 259阅读 0赞

<!DOCTYPE html> 
    <html> 
      
      <head> 
        <meta charset="UTF-8"> 
        <title>回到顶部功能</title> 
      </head> 
      <style> 
        * { 
          padding: 0; 
          margin: 0; 
        } 
          
        .gotop { 
          display: none; 
          position: fixed; 
          bottom: 50px; 
          right: 50px; 
          width: 40px; 
          height: 40px; 
          padding: 5px; 
          background-color: #F00; 
          color: #FFF; 
          text-align: center; 
          cursor: pointer; 
        } 
      </style> 
      <script src="http://libs.baidu.com/jquery/1.8.1/jquery.min.js"></script> 
      
      <body> 
        <p>1</p><br /><br /><br /><br /><br /><br /> 
        <p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br /><p>1</p><br /><br /><br /><br /><br /><br />
      
        <div id="btn" class="gotop"> 
          <p>回到顶部</p>
        </div> 
      </body> 
      <script> 
        //页面加载后触发
    window.onload = function(){
      var btn = document.getElementById('btn');
      var timer = null;
      var isTop = true;
      //获取页面可视区高度
      var clientHeight = document.documentElement.clientHeight;
      //滚动条滚动时触发
      window.onscroll = function() {
      //显示回到顶部按钮
        var osTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (osTop >= clientHeight) {
          btn.style.display = "block";
        } else {
          btn.style.display = "none";
        };
      //回到顶部过程中用户滚动滚动条，停止定时器
        if (!isTop) {
          clearInterval(timer);
        };
        isTop = false;
      };
      btn.onclick = function() {
        //设置定时器
        timer = setInterval(function(){
          //获取滚动条距离顶部高度
          var osTop = document.documentElement.scrollTop || document.body.scrollTop;
          var ispeed = Math.floor(-osTop / 7);
           
          document.documentElement.scrollTop = document.body.scrollTop = osTop+ispeed;
          //到达顶部，清除定时器
          if (osTop == 0) {
            clearInterval(timer);
          };
          isTop = true;
           
        },30);
      };
    };
      </script> 
      
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关分步指南 - 带动画的输入

超文本标记语言对于 HTML，我们需要一个带有输入和带有“编辑”svg 按钮的容器。单击按钮将触发切换。 <div class="container">

痛定思痛。/ 2023年10月13日 15:35/ 0 赞/ 52 阅读

相关带动画的关闭按钮 - 教程

超文本标记语言对于 HTML，我们需要一个包含两个 div 元素和一个带有文本“CLOSE”的 span 元素的容器。 <div class="contain

我不是女神ヾ/ 2023年10月13日 15:35/ 0 赞/ 67 阅读

相关 html返回顶部按钮图片,goToTop（回到顶部）按钮的制作

//GoTop mg12 GoTop = function() \{ this.config = \{ pageWidth : 960,//页面宽度 nodeId :

Love The Way You Lie/ 2022年10月06日 08:58/ 0 赞/ 243 阅读

相关 scroll-view 回到顶部

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

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

相关 jquery实现返回顶部按钮和scroll滚动功能[带动画效果]

jQuery脚本： ![复制代码][copycode.gif] 1 <script type="text/javascript"> 2 $

墨蓝/ 2022年06月13日 10:24/ 0 赞/ 246 阅读

相关回到顶部

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

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

相关带动画的回到返回顶部

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

淩亂°似流年/ 2022年04月12日 02:43/ 0 赞/ 260 阅读

相关回到顶部

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

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

相关回到顶部效果

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

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

相关回到顶部组件

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

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