冷文学习者

文章 分类 标签
53 8 62

站点介绍

冷文博客(KEVINLU98.COM),记录我日常业余的一点一滴。
利用业余时间写与typecho与emlog的主题、插件等,同时也分享一些资源与技术帖
顺带帮大家免费代下载IT教程吧的资源 传送门
友链申请地址(直接评论即可): 传送门

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

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

首页 / 正文

前言

最近在完成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
  })
})

结束

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

评论(0)

当前没有评论,还不快来留下第一个脚印吧

热门文章

最新评论

  • Sukuraaya

  • 大王

    感觉很不错~喜欢!

  • 红尘

    学习学习

  • 少吃肉多吃素

    学习学习

  • yuni

    学习

日历

2021年12月

   1234
567891011
12131415161718
19202122232425
262728293031 

文章目录

上一张 下一张
站点公告
这个周末从北京去趟西安,大家有问题可能不能及时回复,部分插件用不了参考 关于插件用不了 ,申请友键见传送门
点击小铃铛关闭
MUSIC
                    [id:$00000000]
[ar:田井中彩智]
[ti:一番星]
[by:弈恪-御冰阁]
[hash:8f19aa317ce0efdf5872992b37b1289f]
[al:Lipstick / 一番星]
[sign:]
[qq:]
[total:289750]
[offset:0]
[00:00.55]田井中彩智 - 一番星
[00:02.11]作词:田井中彩智
[00:03.42]作曲:田井中彩智
[00:27.09]どこまでも続く空は
[00:33.70]知ってるの
[00:39.25]心はいつまで君を
[00:46.17]憶えていられるのだろう
[00:52.37]ゴールを目指してるようで
[00:56.96]本当は終わり無き
[00:59.30]永を求めてるの
[01:05.70]この広い世界で
[01:08.80]この小さな躯で
[01:11.92]まだ何か伝えられるはず
[01:18.07]限り無く伸ばして
[01:21.20]この指の向こうで
[01:24.23]私を照らす一番星
[01:29.27]君のように
[01:43.96]道に咲く花が風に
[01:50.74]踊るように
[01:56.21]心は今でも揺らり
[02:03.07]君の面影浮かべる
[02:09.23]形ある物は消えゆく
[02:13.84]だけど読みたくない
[02:16.23]人の夢「儚い」と
[02:19.63]この暗い世界で
[02:22.68]この冷たい人波で
[02:25.74]まだ何か見つけられるはず
[02:31.82]背伸びしてばかりじゃ
[02:34.99]気付かない足元で
[02:38.13]私を包む篝火花
[02:43.12]君のように
[02:47.52]命あるもの全て輝く
[02:53.78]命あるもの全て苦しむ
[02:59.64]雨が振りまた晴れる
[03:03.18]空のように
[03:05.78]繰り返すんだろう
[03:15.10]この広い世界で
[03:18.02]この小さな躯で
[03:21.06]まだ何か伝えられるはず
[03:27.24]限り無く伸ばして
[03:30.40]この指の向こうで
[03:33.44]私を照らす一番星 輝く
[03:39.54]この暗い世界で
[03:42.61]君のいない世界でも
[03:45.67]まだ何か見つけられるはず
[03:51.87]小さな愛の欠片を
[03:54.94]温もり感じたり
[03:58.11]私を照らす一番星
[04:02.40]のように優しく
[04:05.81]強く生きてくれた
[04:09.36]君のように                
配色方案