• 当前标签:回顶部

程序开发 Vue、JavaScript原生 回顶部

基于图标来自 element ui ,js原生写法: <template>   <div     id="BackTop"     @click="BackTop">     <i class="el-icon-caret-top"/>   </div> </template> <script> export default {   methods: {     BackTop() {       this.smoothscroll()     },     // 回顶部     smoothscroll() {       const currentScroll =         document.documentElement.scrollTop || document.body.scrollTop       if (currentScroll > 0) {         window.requestAnimationFrame(this.smoothscroll)         window.scrollTo(0, currentScroll - currentScroll / 5)       }     }   } } </script> <style lang="scss" scoped> #BackTop {   background-color: #fff;   position: fixed;   right: 100px;   bottom: 150px;   width: 40px;   height: 40px;   border-radius: 20px;   cursor: pointer;   transition: 0.3s;   box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);   z-index: 5;   &:hover {     transform: scale(1.2);   }   i {     color: #409eff;     display: block;     line-height: 40px;     text-align: center;     font-size: 18px;   } } </style>

2018-10-18 18:10:17 61 2 0
阅读详情

程序开发 jQuery回顶部

<!-- 返回顶部 --> <div class="flex align-items-center justify-content-center goTop">回顶部</div> $(window).scroll(function () {     /* 判断滚动条 距离页面顶部的距离 100可以自定义*/     if ($(window).scrollTop() > 100) {         $(".goTop").fadeIn(100); /* 这里用.show()也可以 只是效果太丑 */         $('.goTop').css({             display: 'flex'         })     } else {         $(".goTop").fadeOut(100);     } }); // 回顶部 $('.goTop').click(function () {     $('body,html').animate({         scrollTop: 0     }, 500);     return false; })

2018-08-08 16:46:38 38 1 0
阅读详情
  • 1
前往