7
张有为电商培训,没有一次是好评,都是很好!

张有为电商培训,没有一次是好评,都是很好!

央视【东方名家】系列光碟《实战网络销售》张有为讲师,集8年的企业网站推广、网络营销策划和网络营销实战经验,先后为两万多家中小企业成功实施了网络营销培训。
 
详细企业介绍
【奥鹏网商学苑】??? ??????奥鹏网商学苑是由上海奥鹏企业管理咨询有限公司总经理、网商张有为先生创立并亲自授课,为中小微企业与个人做网络营销的落地执行系统和网上操作实战技能培训,经过2~3天或1~3个月的实战 更详细
  • 行业:网络营销/推广服务
  • 联系人:张有为 先生
公告
2011年在东方名家开讲《实战网络销售》并发行光碟。2013年在深圳、温州及上海通过网商总裁班,带领60个老板,保姆式传帮带一年,现招收老板学员中……
站内搜索

更多 申请加入成员列表
管理员
ali15866693137
员工
yxueting
供应商
sdpyyzc
员工
更多企业新闻2800开奖直播

使用jQuery创建人性化的返回顶部链接

作者:shonly   发布于 2019-09-19   阅读( )  

  之前写过关于创建人性化的返回顶部链接的文章,讨论了返回顶部链接需要具备哪些特点才能称得上人性化。一直以来我都觉得停留在视觉区域内的返回顶部连接更为完美一些,但由于对javascript不熟悉,所以一直不知道如何在技术上实现,只能使用别人做好的javascript代码。最近一段时间学习了jQuery,发现其实用jQuery来写的话很简单,所以在这片文章里我会介绍一下如何自己动手创建简单而且很酷的返回顶部链接效果,让我们开始。

  有了上面的html后,当我们点击”返回顶部”这个链接时,就会自动跳转到body标签的位置,也就是页面的顶部。

  之所以在上面html代码的 a标签中添加一个空的 span标签,目的是为了创建我们预想的返回顶部链接样式,如下图:

  接下来我们需要使用position : fixed;属性将跳转链接固定到页面上,这样它就可以随时停留在视线范围内。以下是全部CSS代码:

  /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/

  使用jQuery要实现的效果是:当页面初次载入,浏览器滚动条处于最顶部的时候,跳转链接处于隐藏状态。当滚动条向下滚动后,跳转链接逐渐显出,当点击跳转链接后,页面逐渐滚动至顶部,用户红利见顶 总量调控 游戏行业灵山两名女士接了“淘宝客服”的电话后结果……,跳转链接逐渐消失。以下是jQuery代码:

  这里我们给body标签添加了id=”#top”,目的是当浏览器不支持javascript的时候,也可实现返回顶部的效果。实际上jQuery可以让滚动条定位于任何位置,1616kj手机看开奖结果,所以这里我们保留了对浏览器的兼容性。