巅峰霸主 > 设计开发 > 前端技术 > html5+css+js返回顶部代码

通用的html5+css+js返回顶部代码,支持滚动多少高度后显示

时间:2020-12-10 09:20:57  来源:巅峰霸主网  作者:烈火大地 点击:
摘要:支持滚动指定高度显示的js返回顶部代码,利用通用的函数解决jQuery版本和浏览器的兼容性,可以指定滚动高度多少时显示……

不会写返回顶部代码,网上找了很多 都不满足要求,大部分都是jQuery版本的兼容问题,网站本来已经引入了jQuery,但是为了一个返回按钮又再一次引入另一个版本的jQuery,对页面的加载是有影响的,但是对于一个网站来说,返回顶部按钮是一个常用且不可缺少的功能按钮。经过研究,其实可以使用HTML配合css实现按钮的样式,再通过jQuery的hidden和show控制显示与隐藏就能轻松搞定,而且对jQuery版本没有限制,所有的网页均可使用。

第一步:HTML代码

<a class="gotop" href="javascript:scroll(0,0)">返回<br /> 顶部</a>

说明:其中其作用的是a标签中的href="javascript:scroll(0,0)",表示滚动动到顶部,默认通过css控制按钮一直隐藏这个按钮,后面通过js控制什么时候显示。

第二步:css代码

.gotop {
    position: fixed !important;/*悬浮*/
    bottom: 10%;/*按钮位置在底部10%的地方*/
    z-index: 1200;/*位于其他div等上层*/
    font-size: .75rem;/*字体大小*/
    text-decoration: none;/*清除a超链接下划线*/
    display: none;/*默认隐藏起来*/
    padding: .2rem .3rem;
    background: rgba(139, 139, 139, 0.44);
    color: #fff;
    float:right;
}
.gotop:hover, .gotop:active { /*设置鼠标移动到按钮上面的样式*/
    background: #007bff !important;
    color: #fff !important;
    text-decoration: none;
    border: none;
}

说明:css样式主要是控制超链接a标签的样式,这个可以根据网站的风格来修改颜色及字体大小等设置,如果是自适应PC和移动的网页,同样调整样式就可以了,其他均不需要修改。

第三步:js代码

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>//需要引入jQuery,版本不限制,网站已经引入则不用再一次引入
  <script>//该script要放在引用jQuery代码代码的后面加载,否则不能生效
function rightBar() {
    $(window).scroll(function () {
    var scroll_top = $(document).scrollTop();
    if (scroll_top > 230){ //当页面向下滚动高度大于230px时,显示回顶部按钮
        $(".gotop").show(300);//显示按钮的时间300毫秒,有一种动画的感觉
    }else {
            $(".gotop").hide(300);//隐藏按钮的时间,300毫秒
        }
    });
}
rightBar();
</script>

说明:<script>代码要放在jQuery的后面加载,否则显示和隐藏不生效,可以将这个script放在网站页面的footer最底部位置;.gotop是html超链接a标签中的样式,当页面向下滚动高度大于230px时按钮才会显示;以上就是完整的代码,在具体使用过程中,主要需要修改的部分就是css样式,每个网站的风格不一样,所以得适当调整css。

完整网页示例代码

下面分享我的完整代码,这个也是本站的源码,想看效果可以将代码复制到本地测试,也可以看本页面的返回顶部效果。本站使用bootstrap框架,所以代码中css部分引用了bootstrap的部分代码:

<!DOCTYPE html>
<html>
 <head> 
  <!-- bootstrap 标签 --> 
  <meta charset="utf-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> 
  <!-- Bootstrap CSS --> 
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet" /> 
  <title>bootstrap返回顶部按钮演示-dfbazhu.com</title> 
  <style>
.gotop {
    position: fixed !important;
    bottom: 10%;
    z-index: 1200;
    font-size: .75rem;
    text-decoration: none;
    display: none;
    padding: .2rem .3rem;
    background: rgba(139, 139, 139, 0.44);
    color: #fff;
}
.gotop:hover, .gotop:active {
    background: #007bff !important;
    color: #fff !important;
    text-decoration: none;
    border: none;
}
/*返回顶部end*/
</style> 
 </head> 
 <body style="height:1200px"> 
  <p>请将代码拷贝到本地电脑上测试!</p> 
  <p>因为本演示是在iframe框架中,所以点击返回时有问题</p> 
  <p>注意script要放在jQuery的后面加载!</p> 
  <div class="container-lg pr-5"> 
   <div>
    <a class="gotop rounded border" href="javascript:scroll(0,0)">返回<br /> 顶部</a> 
   </div> 
  </div> 
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> 
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script> 
  <script>//该script要放在引用jQuery代码代码的后面
function rightBar() {
    $(window).scroll(function () {
    var scroll_top = $(document).scrollTop();
    if (scroll_top > 230){
        $(".gotop").show(300);
    }else {
            $(".gotop").hide(300);
        }
    });
}
rightBar();
</script>   
 </body>
</html>

本返回顶部代码的在线演示地址:https://www.dfbazhu.com/dm/dmys/1607563122.html

(责任编辑:陆柏熺)
评价:
用户名: 验证码: 看不清?点击更换


关注站长自媒体 获取更多优质内容

  • 百家号
    百家号
  • 头条号
    头条号
  • 企鹅号
    企鹅号

2019-2021 ©巅峰霸主网 京ICP备12023415号-2
返回
顶部