您的位置是:网站首页>Javascript编程Javascript编程

如何用jQuery实现页面返回顶部的效果(附代码)

少儿编程网2020-03-26 21:31:56Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介大家在浏览网站时有没有发现,往下滑动页面会出现一个返回顶部的按钮,点击就能返回顶部,那你知道HTML页面返回顶部怎么实现的吗?这篇文章就给大家分享最简单的HTML页面返回顶部的jQuery代码,感兴趣的朋友可以参考一下。实现页面返回顶部的效果需要用到很多JavaScript知识,比如:functio

大家在浏览网站时有没有发现,往下滑动页面会出现一个返回顶部的按钮,点击就能返回顶部,那你知道HTML页面返回顶部怎么实现的吗?这篇文章就给大家分享最简单的HTML页面返回顶部的jQuery代码,感兴趣的朋友可以参考一下。

 79o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

实现页面返回顶部的效果需要用到很多JavaScript知识,比如:function(),animate,fadeOut等等,如有不清楚的小伙伴可以参考PHP中文网的相关文章,或者访问 JavaScript视频教程。79o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

实例描述:用户往下滑动页面,当滚动条距离顶部的距离大于100px时,用fadeIn显示返回按钮,当点击按钮返回顶部后,按钮消失,具体代码如下:79o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

HTML部分:79o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

<div id="wrapper">
     <div class="cont1"></div>
     <div class="cont2"></div>
     <div class="cont3"></div>
     <div class="cont4"></div>
     <a href="javascript:void(0)" id="toTop" style="display: block;"> 
     </a>
</div>

CSS部分:79o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

*{margin: 0;padding: 0;}
            #wrapper{margin: 0 auto;width: 500px;}
            .cont1{height: 500px;background-color: wheat;}
            .cont2{height: 500px;background-color: honeydew;}
            .cont3{height: 500px;background-color: blueviolet;}
            .cont4{height: 500px;background-color: pink;}
            #toTop {display: none;text-decoration: none;position: fixed;bottom: 20px;right: 20px;overflow: hidden;width: 50px;height: 50px;background: url(img/icon_top.png) no-repeat center center;}

JavaScript部分:79o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

注:因为用的是jQuery写的,要记得引入jQuery文件啊79o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

$(function(){
         //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
         $(function () {
             $(window).scroll(function(){
                 if ($(window).scrollTop()>100){
                     $("#toTop").fadeIn(1000);
                 }
                 else
                 {
                     $("#toTop").fadeOut(1000);
                 }
             });
             //当点击跳转链接后,回到页面顶部位置
             $("#toTop").click(function(){
                 $('body,html').animate({scrollTop:0},1000);
                 return false;
             });
         });
    });

效果图:79o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

bb.jpg79o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

以上给大家分享了如何用jQuery实现HTML页面返回顶部的代码,步骤很详细,简单易懂,初学者可以自己动手尝试,看看你的代码能不能实现回到顶部的效果,希望这篇文章对你有所帮助!79o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

【相关教程推荐】79o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

1. jQuery中文参考手册79o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
2. jQuery视频教程79o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
3. bootstrap教程79o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

以上就是如何用jQuery实现页面返回顶部的效果(附代码)的详细内容,更多请关注少儿编程网其它相关文章!79o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

来源:php中文网79o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台


相关文章:

支持一下 ( )

如何用jQuery实现页面返回顶部的效果(附代码)

      匿名评论
    • 评论
    人参与,条评论
    如何用jQuery实现页面返回顶部的效果(附代码)

客服在线

服务时间

周一至周日 9:00-21:00