Mr丶冷文

文章 分类 评论
117 10 6294

站点介绍

冷文学习者(KEVINLU98.COM),记录一个北漂小码农的日常业余生活
友链申请地址(直接评论即可): 传送门

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

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

首页 / 正文
Freewind主题v1.5版本已发布,下载请移步Freewind 1.5,同时还有主题伴生插件Freewind Markdown,下载请移步 Freewind Markdown,有问题请在留言板,交换友链请直接在友链留言,我创建了一个主题交流群,有兴趣可以加下: 点此加入
报毒我说明一下,是因为我把主题的版权信息做了加密,其中用了eval,杀毒软件认为eval函数是一个危险的操作,这点介意的话请勿下载,我也没有强迫任何人去下载,也没有向大家收取一分钱的主题费用,所以也犯不着因为这些事情来喷我,喜欢就用,不喜欢就不用,就这么简单

发布于2022-10-28

前言

最近在完成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 回复

    支持一下

最新评论

  • 353553

    感谢!!

  • 地方

    感谢!!

  • 地方

    感谢!!

  • 地方

    我要下载 

  • 邱全增

    主题不错

日历

2023年02月

   1234
567891011
12131415161718
19202122232425
262728    

文章目录

站点公告
Freewind主题v1.5版本已发布,下载请移步Freewind 1.5,同时还有主题伴生插件Freewind Markdown,下载请移步 Freewind Markdown,有问题请在留言板,交换友链请直接在友链留言,我创建了一个主题交流群,有兴趣可以加下: 点此加入
报毒我说明一下,是因为我把主题的版权信息做了加密,其中用了eval,杀毒软件认为eval函数是一个危险的操作,这点介意的话请勿下载,我也没有强迫任何人去下载,也没有向大家收取一分钱的主题费用,所以也犯不着因为这些事情来喷我,喜欢就用,不喜欢就不用,就这么简单
点击小铃铛关闭