Mr丶冷文

文章 分类 评论
85 9 4960

站点介绍

冷文学习者(KEVINLU98.COM),记录一个北漂小码农的日常业余生活
顺带帮大家免费代下载IT教程吧的资源 传送门
友链申请地址(直接评论即可): 传送门

jQuery实现一个优雅的返回顶部

MR丶冷文 2021-09-27 1028 1条评论 技术学习 jsjquery

首页 / 正文
Freewind主题v1.4版本已经发布,详情与下载请关注 Freewind1.4更新
抱歉:
年后因为工作和生活上的一系列不顺心的事情我无法去维护Freewind主题,目前也在思考一些问题,比如要不要继续工作,或者要不要去读硕士等,等这些事件都处理好了我会继续看Freewind主题的

发布于2022-05-26

前言

最近在完成Freewind主题V1.1版本的小升级,加了返回顶部的功能,索性就把实现整理成一篇博文发布出来供大家学习,效果如下:

https://imagebed-1252410096.cos.ap-nanjing.myqcloud.com/20210927/bc31a129bb5f418995dac9e7f3453115.gif

主要功能

  • 在鼠标滚动超过一半屏幕高度时显示回顶部按钮,其它情况隐藏
  • 点击按钮回不是立刻回到顶部,有一个滚动的动画

设计思路

  • 设计出按钮位置和样式,并且将按钮不置为透明
  • 在鼠标发生滚动事件时做判断,如果滚动位置大于屏幕高度的一半,则显示回顶部按钮
  • 为按钮添加点击事件,点击时使用jQuery的动画组件做一个回顶部的动画

代码实现

第三方库

  • jquery
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  • font-awesome
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

按钮设计

我自己是写了个按钮组,有个QQ联系和回顶部,正常情况只显示QQ联系

  • html代码
<div id="bottom-btn-list">
    <a id="top-btn" href="javascript:void (0);"><i class="fa fa-arrow-up"></i></a>
    <a class="qq-btn"
       href="http://wpa.qq.com/msgrd?v=3&amp;uin=qq号&amp;site=qq&amp;menu=yes"
       target="_blank"><i class="fa fa-qq"></i></a>
</div>
  • 对应css样式
#bottom-btn-list {
    position: fixed;
    width: 40px;
    bottom: 50px;
    right: 10px;
}

#bottom-btn-list #top-btn {
    opacity: 0;
}

#bottom-btn-list a {
    margin-top: 5px;
    background-color: rgba(0, 0, 0, .3);
    display: block;
    text-align: center;
    height: 40px;
    line-height: 40px;
    color: #FFFFFF;
    font-size: 20px;
}

滚动判断是否显示按钮

$(window).scroll(function () {
  //滚动高度
  let scTop = $(window).scrollTop()
  //屏幕高度
  let height = $(window).height()
  if (scTop >= height * 0.5) {
    //利用jquery动画组件显示
    $("#top-btn").stop().animate({'opacity': '1'}, 500)
  } else {
    $("#top-btn").stop().animate({'opacity': '0'}, 500)
  }
})

按钮点击事件

$("#top-btn").on('click', function () {
  $('body,html').stop().animate({
    scrollTop: 0
  })
})

结束

是不是很简单呢!感谢您的阅读

评论(1)

  1. 小丑 游客 2021-12-08 12:38 回复

    支持一下

热门文章

最新评论

  • huhan

    学习

  • huhan

    wushirenwei过来看看

  • senqice

    1223333哈哈

  • Tanlan5

    过来看看

  • 王总

    谢谢

日历

2022年09月

    123
45678910
11121314151617
18192021222324
252627282930 

文章目录

站点公告
Freewind主题v1.4版本已经发布,详情与下载请关注 Freewind1.4更新
抱歉:
年后因为工作和生活上的一系列不顺心的事情我无法去维护Freewind主题,目前也在思考一些问题,比如要不要继续工作,或者要不要去读硕士等,等这些事件都处理好了我会继续看Freewind主题的
点击小铃铛关闭
配色方案