[JavaScript知识库]点击回到顶部

?默认不显示回到顶部的按钮，当滚动条滚到大于100像素的时候，回到顶部的按钮显示，点击顶部按钮回到顶部，然后回到顶部的按钮消失。

? ??

1、 先在项目里面引入iconfont图标，我使用iconfont Unicode编码线上字体图标，创建一个

iconfont.css文件，把下面的代码复值到iconfont.css文件保存。

@font-face?{

????font-family:?'iconfont';??/*?Project?id?2737254?*/

????src:?url('//at.alicdn.com/t/font_2737254_1zdflbjtvny.woff2?t=1628660156120')?format('woff2'),

?????????url('//at.alicdn.com/t/font_2737254_1zdflbjtvny.woff?t=1628660156120')?format('woff'),

?????????url('//at.alicdn.com/t/font_2737254_1zdflbjtvny.ttf?t=1628660156120')?format('truetype');

??}

2、在哪使用就在哪引入，我是在app.vue里使用，app.vue组件style部分引入@import?"./assets/css/iconfont.css";

3、结构部分

<template>

????<div?class="footer">

??????<div?class="iconfont"?v-show="gotop"?@click="toTop">&#xe7ed;</div>

????</div>

</template>

4、js部分

export?default?{

??data()?{

????return?{

??????gotop:?false

????};

??},

??mounted()?{　　//?此处true需要加上，不加滚动事件可能绑定不成功

????window.addEventListener("scroll",?this.handleScroll,?true);

??},

??methods:?{

????handleScroll()?{

???????let?scrolltop?=?document.documentElement.scrollTop?||?document.body.scrollTop;

??????scrolltop?>?100???(this.gotop?=?true)?:?(this.gotop?=?false);

????},

????toTop()?{?

??????let?top?=?document.documentElement.scrollTop?||?document.body.scrollTop;

??????//?实现滚动效果?

??????const?timeTop?=?setInterval(()?=>?{

????????document.body.scrollTop?=?document.documentElement.scrollTop?=?top?-=?50;

????????if?(top?<=?0)?{

??????????clearInterval(timeTop);

????????}

??????},?10);

????}

??}

}

5、css部分

@import?"./assets/css/iconfont.css";

.footer?{

??height:?2000px

}

.iconfont?{

??display:?inline-block;

??font-family:?"iconfont"?!important;

??font-size:?16px;

??font-style:?normal;

??color:?#55aaf8;

??text-align:?center;

??line-height:?30px;

??width:?30px;

??height:?30px;

??border-radius:?50%;

??box-shadow:?0px?0px?10px?#f6f6f6;

??text-align:?center;

??position:?fixed;

??right:?50px;

??bottom:?30px;

??cursor:?pointer;

??background:?white;

}