网站圆型百分比进度条返回顶部代码

一共就两个代码,一个是js加入到你网站main.js主要的js代码文件里面。

另一个是css,也是一样的加到网站后台或者是main.css文件里面都可以。

随着鼠标滚轮的滑动,根据屏幕当前的网页位置来判定你处于网页中的百分比那个地方,鼠标点击一下(hover获取焦点)就会显示一个回顶部提示文字并自动的返回顶部(#)。

为什么我要说明(hover获取焦点),因为有的网友和我说手机浏览器点击返回顶部后,再往下浏览拖动不会显示回来百分比,也正是因为(hover获取焦点)方式,所以需要你再次随便点击一下网页的其它部分就会显示回来了,不过没关系,正常的阅读者应该不会无聊到纠结或者玩这个百分比吧!

  • 演示:请看本站右下角返回顶部样式

css代码

/*返回顶部%css*/
    #backtoTop {
    background-color:rgba(84,82,82,0.15);/*背景颜色,后面0.15是透明度*/
    border-radius:100%;
    bottom:10%;
    /*圆角、下距*/
    height:33px;
    position:fixed;
    right:-100px;
    width:33px;
    transition:0.5s;
    -webkit-transition:0.5s
}
#backtoTop.button--show {
    right:2px
}
/*边距*/
    .per {
    font-size:16px;
    height:30px;
    line-height:30px;
    position:absolute;
    text-align:center;
    top:0;
    width:33px;
    color:#CD0000;
    /*文字颜色*/
    cursor:pointer
}
.per:before {
    content:attr(data-percent)
}
.per:hover:before {
    content:"↑";
    font-size:15px
}
/*文字大小*/

js代码

如果你的网站没有那两个文件的就自己新建,然后代码自己放进去,再然后在网页主题模板底部如下引用就好了!

<script type="text/javascript" src="https://www.athao.com/xxx/main.js"></script>
<link rel="stylesheet" href="https://www.athao.com/xxx/main.css" />

 

© 版权声明
THE END
喜欢就支持以下吧
点赞0
分享
评论 共4条