回到顶部组件

Myth丶恋晨 2021-10-09 03:52 425阅读 0赞

回到顶部--组件

1.html

一个button足矣

<button class="back-to-top">返回顶部</button>

2.css

注意：position:fixed ,只要是相对于浏览器屏幕位置的就是fixed，固定布局

.back-to-top{
    
    	position: fixed;
    	bottom: 30px;
    	right: 30px;
    	border:1px solid #888;
    }

3.js

;$(function()
    {
      'use strict';
    
       var backButton = $('.back-to-top'); //选择返回顶部   
       backButton.on('click',function(){   //监听返回按钮
           $('html, body').animate({
           	 scrollTop:0      	 	
           },800) //滚动上来，800ms
           console.log("back");
      	 })
    
       
        $(window).on('scroll',function(){  //监听window.scroll事件
         	      //如果滚动的高度大于窗口高度就显示
         		if($(window).scrollTop() > $(window).height()){
         		     backButton.fadeIn();
         		 }else{ //否则隐藏按钮
         		     backButton.fadeOut();
         		}
         })
        //让window先触发scroll事件,使得一开始没有返回顶部按钮
          $(window).trigger('scroll');  
    
    })

4.效果图：刚开始没有出现返回顶部，等滚动到下面时就出现了，点击后返回到最上端：scrollTop:0

![SouthEast][]

[SouthEast]: /images/20211009/f1cf6a73a02d400583b995395572ec5f.png

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue封装回到顶部公共组件(动画过渡)-案例

演示 ![20210805181920513.gif][] > Top.vue <template> <div class="goTop" v-s

梦里梦外;/ 2022年09月03日 05:15/ 0 赞/ 213 阅读

相关 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 赞/ 473 阅读

相关回到顶部JavaScript实现

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

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

相关回到顶部

<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 阅读

相关 el-backtop回到顶部组件使用问题汇总

这是官网的基础语法和教程 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG

古城微笑少年丶/ 2021年09月25日 05:08/ 0 赞/ 2318 阅读

相关 element-ui 回到顶部组件el-backtop

参考： 1，[https://blog.csdn.net/weixin\_42598901/article/details/99674145][https_blog.csdn

ゝ一世哀愁。/ 2021年08月20日 02:14/ 0 赞/ 855 阅读