返回顶部案例

最新推荐文章于 2023-10-14 20:25:00 发布
最新推荐文章于 2023-10-14 20:25:00 发布
阅读量132 收藏
点赞数
文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/asmruan/article/details/121940261
版权 
<!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>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      header {
        height: 2000px;
        background-color: cyan;
      }
      img {
        position: fixed;
        right: 20px;
        bottom: 20px;
        display: none;
      }
    </style>
  </head>
  <body>
    <header>
      <img
        src="file:///C:/Users/15733/Desktop/02-JavaScript-v1.3/2-JavaScriptAPI/day06-%E9%AB%98%E7%BA%A7%E5%8A%A8%E7%94%BB(%E4%BA%8C)/%E6%95%99%E5%AD%A6%E6%BC%94%E7%A4%BA%E6%A1%88%E4%BE%8B/images/top.png"
        alt=""
      />
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
      </ul>
    </header>
  </body>
</html>
<script>
  // 监听屏幕滚动
  var img = document.querySelector("img");

  var timer = null;

  img.onclick = function () {
    // document.documentElement.scrollTop = 0
    // document.body.scrollTop = 0
    clearInterval(timer);
    timer = setInterval(function () {
      document.documentElement.scrollTop--;
      document.body.scrollTop--;
    }, 1);
  };

  window.onscroll = function (event) {
    var event = event || window.event;
    console.log(event);

    var scrollTop =
      document.documentElement.scrollTop || document.body.scrollTop;

    if (scrollTop > 200) {
      document.querySelector("img").style.display = "block";
    }
    if (scrollTop <= 0) {
      clearInterval(timer);
      document.querySelector("img").style.display = "none";
    }
  };
</script>

Asmruan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
flex布局，换行的元素上下设置间距
qq_37635012的博客
12-12 3649
2） 设置需要更改间距的元素（li）的margin-bottom：14px;然后使用结构伪类选择器设置最后的几个元素margin-bottom: 0;1）设置需要更改间距的元素（li）的margin-bottom:14px,然后用父容器（ul）的margin-bottom: -14px;当我们使用弹性盒子布局后，默认元素是没有外边距的，紧挨着样式就有点丑，如果想使换行后，元素的外边距有个距离，可以用如下方法解决。
html5中的拖放事件
m0_60489011的博客
09-16 909
1 定义 拖放是一种常见的特性，即抓取对象以后拖到另一个位置。 在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。 2 动作 (1)dragstart按下鼠标并开始移动鼠标，就会触发这个事件，我们通过ondargstart来调用方法。 (2)drag当dragstart开始，会持续触发darg这个事件。 【类似mousemove事件，不能放太复杂的代码】 (3)drag...
flex布局超出宽度自动换行，换行后设置每个元素之间的间距
Ruby_zst的博客
10-14 522
给父盒子加上一个css - gap:10px。就可以了 真牛逼啊焯。
html转换为string
rugaxm的专栏
12-20 5141
package com.akazam.framework.core.utils; public class HtmlToStringUtils {     public static String htmlToStr(String htmlStr) {           String result = "";           boolean flag = true;
CSS3动画制作文字从左到右显示的效果
杨青青个人博客（青青本人）
05-01 7355
以一首骆宾王的《咏鹅》为例，制作一个css3动画文字效果，文字动画规则：从左向右缓慢进入，并且文字从透明再过渡到不透明，另外每段话完了后，有个时间间隔，也就是延时多少秒再开始动画。
jquery小火箭返回顶部.rar
09-22
jquery小火箭返回顶部.rar
【JavaScript源代码】JavaScript实现返回顶部按钮案例.docx
12-29
JavaScript实现返回顶部按钮案例 　本文实例为大家分享了JavaScript实现返回顶部按钮的具体代码，供大家参考，具体内容如下　思路：　首先先设计出其静态样式，这里主要利用固定定位，将其固定在页面底部的某一位置...
jQuery实现小火箭返回顶部特效
11-20
jquery实现小火箭返回顶部案例，供大家参考，具体内容如下 1. 滚动页面，当页面距离顶部超出1000px，显示小火箭。 封装在scroll函数里，当前页面距离顶部为$(window).scrollTop >=1000 小火箭显示和隐藏用fadeIn和...
js返回顶部/底部demo Jquery返回顶部/底部案例
11-14
js返回顶部/底部demo Jquery返回顶部/底部案例，html代码返回顶部以及返回顶部的案例
返回顶部火箭修改版 v1.0.2.rar
最新发布
03-27
返回顶部火箭修改版 v1.0.2.rar
html+js实现加减乘除运算
04-13
html+js实现加减乘除运算, blog: http://blog.csdn.net/zhulei632/article/details/23596299
CSS3实现漂亮时钟代码.zip
07-03
这是一款漂亮的时钟效果，使用纯css3实现
flex布局，一行内显示4个元素，超出4个换行，右间距设置
crazybai0001的博客
07-03 2万+
.search-wrapper { /* flex布局，换行、左对齐 */ display: flex; justify-content: flex-start; flex-wrap: wrap; margin: 0 40rpx; position: absolute; top: 240rpx; left: 0; right: 0;}.city { font-size: 24rpx; background: #fff; border-radius: 20rpx; padding:
flex布局产生的间隙解决方法
小柒的博客
03-11 1万+
flex布局的元素会有默认间隙，解决方法 align-content: flex-start 具体参数如下： 取值情况： flex-start：与交叉轴的起点对齐。 flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。 stretch（默认值）：轴线占满整个交叉轴。 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around：每...
flex布局换行后均匀分布
热门推荐
donggua_123的博客
09-12 4万+
今天做一个需求的时候发现一个问题，原型需要做出这样的布局效果 首先想到的肯定是flex布局 display: flex; justify-content: space-between; flex-wrap: wrap; 嗯，确实达到了效果，完美！！ 但是当数据不是4的倍数的时候，就出现问题了 可以看到最后一排依然遵循均匀铺开在父级宽度里面，但这显然不是我们想要的效果 如果...
使用flex布局实现宽度自适应
R398562246的博客
09-24 6888
1.两侧固定，中间自适应 .box{ width:100%; display:flex; height:300px; } .left{ width:100px; height:200px; background-color:red; } .right{ width:100px; ...
HTML5 拖放事件及对象
慕白博客
07-20 1846
一、简介 HTML5 中提供了直接拖放的 API，极大的方便我们实现拖放效果，只需要通过监听元素的拖放事件就能实现各种拖放功能。想要拖放某个元素，必须设置该元素的 draggable 属性为 true，当该属性为 false 时，将不允许拖放。而 img 元素和 a 元素都默认设置了draggable 属性为 true， 可直接拖放， 如果不想拖放这两个元素， 把属性设为 false 即可。 ...
js简单的字符串转html(对象)
Elvin的博客
06-25 3万+
var str = "&lt;span&gt;hk&lt;/span&gt;"; var parent = $('body'); parent.html(str);
过滤html标签__转转转
程涛
12-14 184
package cn.java; import java.util.regex.Pattern; public class HTMLUtils {          /**           * @param str :           *            source string           * @param width :           *  ...
uniapp返回顶部
08-04
在Uniapp中实现返回顶部功能可以通过以下步骤来完成： 1. 首先，在需要返回顶部的页面中引入返回顶部组件。根据引用[1]和引用[2]的代码，可以看到返回顶部组件的模板和方法。将这些代码复制到你的页面中。 2. 在...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值