15259251930

网站建设 APP开发 小程序

KNOWLEDGE/新闻知识

分享你我感悟

您当前位置> 首页 > 新闻知识 > 开发知识

简洁美观的网站回到顶部按钮代码分享

发表时间:2022-04-24 22:42:12

文章发布:星点互动科技

浏览次数:

简洁美观的网站回到顶部按钮代码分享,星点互动科技给大家带来一个比较实用的 jQuery 技巧,做网站的时候添加一个纯代码画出来的、简洁美观的回到顶部按钮。这个按钮的效果就是当页面滑动一段距离之后,就会浮现出来这个按钮,点击这个按钮之后,就自动滚动到顶部。

点击之后就会跳转到顶部,然后这个按钮平滑消失。与网上的相比,星点互动科技分享的是纯代码,加载速度更快,效果色彩控制好;代码精简,只有数条而已,拒绝大坨大坨的代码。废话不多说,下面就开始开发网站返回顶部功能。

HTML 结构

我使用了 a 标签作为这个结构,可能不太标准,但是比较方便。在 a 标签中,内置了一个 span 标签,用来显示三角号。具体代码如下:

<a id="gotop" href="#">
  <span>▲</span>
</a>

对,你没看错,就这么简单的一句代码,直接在 a 标签中,填写一个三角号。剩下的就是使用 CSS 进行样式控制。


CSS 代码

#gotop{
   display:block;
   width:60px;
   height:60px;
   position:fixed;
   bottom:50px;
   right:40px;
   border-radius:10px 10px 10px 10px;
   text-decoration:none;
   display:none;
   background-color:#999999;
}

上面这段代码,定义了 a 标签的外观样式,定义 display 为 block,这样,我们才能指定它的 width 和 height。定义 position 为fixed,让它固定在右下角。同时为它指定圆角,就是使用 border-radius 属性,定于半径为10px的圆角。


#gotop span{
   display:block;
   width:60px;
   color:#dddddd;
}
#gotop span:hover{
   color:#cccccc;
}
#gotop span{
   font-size:40px;
   text-align:center;
   margin-top:4px;
}

上面这一段,就是定义了 span 标签里面的三角号,至于如何打出这个“三角号”,使用搜狗输入法,按下“Ctrl + Shift + z”,就会弹出搜狗的特殊字符,就可以找到了。这几句代码意思很简单,就是定义了三角号的外观样式,同时制定了颜色变化,这是为了用户体验。最下面的 margin-top:4px,则是用来准确定位三角号,让它居中显示。

jQuery 代码

具体的 jQuery 代码如下,解析已经写在注释里面了:

$(function(){
   $(window).scroll(function(){  //只要窗口滚动,就触发下面代码
       var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度
       if( scrollt >200 ){  //判断滚动后高度超过200px,就显示
           $("#gotop").fadeIn(400); //淡出
       }else{
           $("#gotop").stop().fadeOut(400); //如果返回或者没有超过,就淡入.必须加上stop()停止之前动画,否则会出现闪动
       }
   });
   $("#gotop").click(function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部
           $("html,body").animate({scrollTop:"0px"},200);
   });
});

怎么样,简单吧?就用这几句代码而已,就可以出现这个功能,而且可以方便的修改颜色、形状、大小等。当然缺点也是有的,就是在IE6等过时的浏览器中,可能不会兼容无法实现。

相关开发案例查看更多