首页 > Web开发 > 详细

js实现回到顶部功能

时间:2020-03-14 20:48:15      阅读:59      评论:0      收藏:0      [点我收藏+]

 

手机站、PC站网页使用javascript,jquery实现页面一键向上,回到顶部功能

需要引入jquery.js文件

 

 

<div class="back_top" id="back-to-top">
</div>

<style>
    .back_top{
        position: fixed;
        z-index: 999999999999;
        background: url(/${res}/images/top.png) no-repeat;   /*回到顶部背景图片*/
        display: block;
        background-position: 0 -40px;
        width: 58px;
        height: 58px;
        right: 18px;
        bottom: 32px;
        filter: alpha(opacity=80);

    }
</style>


<script>
    $(function () {
        $(‘#back-to-top‘).hide();
        // 获取要大于的高度
        //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
        $(function () {
            $(window).scroll(function(){
                if ($(window).scrollTop()>100){
                    $("#back-to-top").fadeIn(500);
                }
                else
                {
                    $("#back-to-top").fadeOut(500);
                }
            });

            //当点击跳转链接后,回到页面顶部位置
            $("#back-to-top").click(function(){
                //$(‘body,html‘).animate({scrollTop:0},1000);
                if ($(‘html‘).scrollTop()) {
                    $(‘html‘).animate({ scrollTop: 0 }, 1000);
                    return false;
                }
                $(‘body‘).animate({ scrollTop: 0 }, 1000);
                return false;
            });
        });
    })
</script>

  

 

效果

技术分享图片

 

js实现回到顶部功能

原文:https://www.cnblogs.com/pxblog/p/12493918.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!