个性博客右下角的返回顶部等按钮样式

个性博客右下角的返回顶部等按钮样式

我这里图标引用的是字符库，你们也可以自己写样式或引用背景图片等

字符库可以去https://www.iconfont.cn/站里去挑选自己喜欢，也可以直接用下面我自己选的，放在css里即可

@font-face {
  font-family: 'iconfont';  /* Project id 1228800 */
  src: url('//at.alicdn.com/t/font_1228800_j9ry9behpzj.woff2?t=1644671093631') format('woff2'),
       url('//at.alicdn.com/t/font_1228800_j9ry9behpzj.woff?t=1644671093631') format('woff'),
       url('//at.alicdn.com/t/font_1228800_j9ry9behpzj.ttf?t=1644671093631') format('truetype');
}

复制

点击查看代码

<!--引入jquery文件-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<!--右侧返回顶部等菜单-->
<div id="rightMenu">
    <a id="rightMenuHome" class="rightMenuItem"  href="https://www.cnblogs.com/moranjl/">
        <span class="rightMenuSpan">访问主页 </span>
        <i class="iconfont home">&#xe61a;</i>
    </a>
    <div id="attention" class="rightMenuItem" onclick="follow('58511de9-beb0-4f6a-3a15-08d9bb01539c')"> 
        <span class="rightMenuSpan attentionSpan">关注我</span>
        <i class="iconfont guanzhu">&#xeca2;</i> 
    </div>
    <div class="rightMenuItem">
        <div class="wchar-box">
            <img src="https://images.cnblogs.com/cnblogs_com/blogs/725648/galleries/2101627/o_220209142114_index.png"/>
            <span>关注微博</span>
        </div>
        <i class="iconfont wchar">&#xe748;</i>
    </div>
    <a id="rightMenuSite" class="rightMenuItem"  href="https://msg.cnblogs.com/send/%E8%93%A6%E7%84%B6JL"> 
        <span class="rightMenuSpan" >私信我</span> 
            <i class="iconfont shezhi">&#xe72e;</i> 
    </a>
    <div id="toUpDown" class="rightMenuItem"> 
        <span class="rightMenuSpan toUpDownSpan">返回顶部</span>
        <div id="toUpDownI"> 
            <i  class="iconfont zhiding">&#xe63a;</i> 
        </div>
    </div>
</div>

<style>
/*右侧返回顶部等菜单*/
#rightMenu {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 2;
}

.rightMenuItem {
	position: relative;
	display: block;
	margin-bottom: 4px;
	padding: 4px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-image: linear-gradient(180deg,#fff,#f5f5fa);
	-webkit-box-shadow: 0 4px 11px -2px rgb(37 44 97 / 15%),0 1px 3px 0 rgb(93 100 148 / 20%);
	box-shadow: 0 4px 11px -2px rgb(37 44 97 / 15%),0 1px 3px 0 rgb(93 100 148 / 20%);
	color: #777aaf;
	text-align: center;
	font-size: 15px;
	line-height: 28px;
	cursor: pointer;
	-webkit-transition: all .5s ease-out;
	transition: all .5s ease-out;
	filter: Alpha(opacity=50);
}
.rightMenuItem .wchar-box{
    position: absolute;
    left: auto;
    right: 5px;
    width: 28px;
    height: 28px;
    padding: 10px;
    background: #fff;
    box-shadow: 0 4px 11px -2px rgb(37 44 97 / 15%), 0 1px 3px 0 rgb(93 100 148 / 20%);
    box-sizing: border-box;
    opacity: 0;
    top: 5px;
    transition: all .5s ease-out;
	overflow: hidden;
}
.rightMenuItem .wchar-box span{
    margin-top: 5px;
    font-size: 12px;
    color: #999;
}
.rightMenuItem:hover .wchar-box{
    opacity: 1;
    transition: all .5s ease-out;
	right: 50px;
	top: -30px;
	width: 100px;
    height: 100px;
	overflow: visible;
}
#attention i,#rightBuryit i,#rightDiggit i,#rightMenuHome i,#rtaDirectory i,#toUpDownI i {
	font-weight: 600;
}

#rightGzh .rightMenuSpan {
	top: -25px;
}

.rightMenuItem .rightMenuSpan {
	position: absolute;
	left: -95px;
	width: 83px;
	max-width: unset;
	border: 0;
	border-radius: 3px;
	background: #1b1c1d!important;
	-webkit-box-shadow: 0 0 6px -1px rgba(140,146,163,.5);
	box-shadow: 0 0 6px -1px rgba(140,146,163,.5);
	color: #fff;
	text-align: center;
	white-space: nowrap;
	font-weight: 400;
	font-style: normal;
	font-size: 14px;
}

.rightMenuItem .rightMenuSpan::before {
	position: absolute;
	top: 50%;
	right: -.325em;
	bottom: auto;
	left: auto;
	display: block;
	box-sizing: border-box;
	margin-top: -3.9px;
	width: 8.98px;
	height: 8.98px;
	background-color: #1b1c1d;
	background-attachment: scroll;
	background-clip: border-box;
	box-shadow: rgba(179,179,179,.2) 1px -1px 0 0;
	color: #fff;
	content: "";
	white-space: nowrap;
	transform: matrix(.707107,.707107,-.707107,.707107,0,0);
}

.rightMenuItem .rightMenuSpan,.rightMenuItem .rightMenuSpan::before {
	opacity: 0;
	transition: 0.2s;
}

.rightMenuItem:hover .rightMenuSpan,.rightMenuItem:hover .rightMenuSpan::before {
	opacity: 1;
	transition: 0.2s;
}

.rightMenuItem:hover i {
	color: #807dd4;
}

#toUpDown {
	opacity: 0;
}

#toUpDown.active {
	opacity: 1;
}
</style>
<script>
//页面向下滑动时，返回顶部按钮显示
$(window).scroll(function() {
    var position = $(window).scrollTop();
    if (position >= 200) {
        $('#toUpDown').addClass('active');
    } else {
        $('#toUpDown').removeClass('active');
    }
});
//点击返回顶部
        $("#toUpDown").click(function() {
          $("html, body").animate({
              scrollTop: 0
          }, 600);
          return false;
      });
</script>