2021-10-04

用juqery写显示与隐藏 返回顶部按钮

首先,咱们要用到的是HTML、css设置样式、以及juqery插件
下面就让我们一起来看一看
1、HTML部分

<head>//咱们首先要先引入jq插件,在头部引用,这样页面一开始就可以加载到
	 <script type="text/javascript" src="./所有的juqery版本/jquery2.1.1/jquery-2.1.1.js">script>
head>
<a name="锚点">a>//顶部的锚点作为跳转
<div class="zzx_Return">
            <a href="#锚点" class="zzx_Return2"><img src="./fh_top01.jpg">a>//用图片点击实现返回顶部
        div>
        ```
2、css部分

```css
.zzx_Return{/* 锚点部分 */设置锚点盒子的大小
    width: 50px;
    height: 50px;
    position: fixed;
    top: 800px;
    left: 1600px;
}
.zzx_Return a img{//设置锚点点击图片的大小
   width: 50px;
   height: 50px;
}

3、juQery部分,咱们要用到的五个小方法
ready()方法,scroll()方法、scrollTop()方法、fadeOut()方法 、以及fadeIn()方法

<script type="text/javascript">
     //jq部分
     $(document).ready(function(){
     //页面加载完成执行
        $(".zzx_Return2").fadeOut();//加载完成首先让返回顶部按钮消失
        $(window).scroll(function(){
     //获取页面现在所在的位置
             if($(window).scrollTop()>500){
     //当页面高度大于500时
                 $(".zzx_Return2").fadeIn();//返回顶部按钮显示
             }else{
     
                $(".zzx_Return2").fadeOut();//否则返回顶部按钮不显示显示
             }
        });
    });

</script>

好了,以上就是我今天分享的一点点小方法,有建议可以和我提哦,咱们一起学习!
加油!前端攻城狮!!!

你可能感兴趣的:(css,html,javascript)