首页>前端教程>jQuery教程

jQuery插件推荐:简单实用的返回到顶部插件!

返回到顶部几乎是一个网站的标配,不过对于一个小型的网站来说,太过复杂花哨的插件反而不实用。

这里推荐一个插件,随着滚动条滚动出现按钮,到了一定的页面深度后,透明度降低,页面滚动效果平滑,简单实用。

动图效果:

返回到顶部插件.gif

插件演示

插件下载

链接:http://pan.baidu.com/s/1bWnqwA 密码:0qf8

具体使用方法:

1、HTML结构

在body标签结束之前添加返回顶部按钮:

<body>
  <!-- all your content here -->
  
  <a href="#0" class="cd-top">Top</a>
  
  <!-- link to scripts here -->
</body>

2、CSS样式

返回顶部按钮始终出现在页面的右边。初始化时它是不可见的:visibility:hidden; 和 opacity:0;。这两个属性可以通过2个class来控制:.cd-is-visible 和.cd-fade-out

.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}

3、JavaScript代码

在demo中,我们使用三个变量来控制返回顶部按钮:

//browser window scroll (in pixels) after which the "back to top" link is shown
var offset = 300,
  //browser window scroll (in pixels) after which the "back to top" link opacity is reduced
  offset_opacity = 1200,
  //duration of the top scrolling animation (in ms)
  scroll_top_duration = 700;

offset变量用于切换.cd-is-visible类。offset_opacity用于控制.cd-fade-out

返回顶部的动画使用的是jQuery .animate()方法。


点赞


0
保存到:

相关文章

发表评论:

◎请发表你卖萌撒娇或一针见血的评论,严禁小广告。

Top