带CSS3动画效果的炫酷jquery返回顶部插件

当前位置:主页 > jQuery库 > 布局和界面 > 带CSS3动画效果的炫酷jquery返回顶部插件
带CSS3动画效果的炫酷jquery返回顶部插件
分享:

    插件介绍

    gototop是一款轻量级、简单易用的jquery返回顶部插件。该jquery返回顶部插件在用户向下滚动页面一段距离之后,会以CSS3动画方式出现返回顶部按钮。点击返回顶部按钮之后,页面以平滑的方式滚动回顶部。

    浏览器兼容性

    浏览器兼容性
    时间:12-12
    阅读:
简要教程

gototop是一款轻量级、简单易用的jquery返回顶部插件。该jquery返回顶部插件在用户向下滚动页面一段距离之后,会以CSS3动画方式出现返回顶部按钮。点击返回顶部按钮之后,页面以平滑的方式滚动回顶部。

使用方法

在页面中引入jquery、jquery.gototop.min.js文件。

<script type="text/jscript" src="js/jquery.min.js"></script>
<script type="text/jscript" src="js/jquery.gototop.min.js"></script>
                
HTML结构

可以使用一个<button>元素来制作返回顶部按钮。

<button class="gototop"><span>返回顶部</span></button>
                
CSS样式

为返回顶部按钮添加下面的CSS样式,使用animation动画来制作返回顶部按钮出现时的CSS动画效果。

.gototop {
    display: none;
    -webkit-animation: hide 350ms ease-out forwards 1;
    animation: hide 350ms ease-out forwards 1;
    padding: 16px 32px;
    border: 0;
    text-align: center;
    background-color:#D5D6E2;
    color: #494A5F;
    position: fixed;
    bottom: 16px;
    right: 16px;
    -webkit-transition: background-color 100ms ease-in-out;
    transition: background-color 100ms ease-in-out;
}
.gototop > span {
    display: inline-block;
    -webkit-transition: transform 100ms 100ms ease-in-out;
    transition: transform 100ms 100ms ease-in-out;
}
.gototop:hover,
.gototop:focus {
    background-color:#D5D6E2;
}
.gototop:hover > span,
.gototop:focus > span {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
}
.isvisible {
    -webkit-animation: show 1s ease-out forwards 1;
    animation: show 1s ease-out forwards 1;
}

@-webkit-keyframes hide{
  0% {
    opacity: 1;
    -webkit-transform:translateY(0);
  }
  25%{
    opacity: .5;
    -webkit-transform: rotate(-3deg) translateY(-40px);
  }
  75%{
    -webkit-transform: rotate(3deg);
  }
  100%{
    opacity: 0;
    -webkit-transform:translateY(100px);
  }
}
@keyframes hide{
  0% {
    opacity: 1;
    transform:translateY(0);
  }
  25%{
    opacity: .5;
    transform: rotate(-3deg) translateY(-40px);
  }
  75%{
    transform: rotate(3deg);
  }
  100%{
    opacity: 0;
    transform:translateY(100px);
  }
}

@-webkit-keyframes show{
  0% {
    -webkit-transform: rotate(0deg);
  }
  25%{
    opacity: .5;
    -webkit-transform: rotate(-3deg) translateY(-40px);
  }
  75%{
    -webkit-transform: rotate(3deg);
  }
  100%{
    opacity: 1;
    -webkit-transform: rotate(0deg);
  }
}

@keyframes show{
  0% {
    transform: rotate(0deg);
  }
  25%{
    opacity: .5;
    transform: rotate(-3deg) translateY(-40px);
  }
  75%{
    transform: rotate(3deg);
  }
  100%{
    opacity: 1;
    transform: rotate(0deg);
  }
}                  
                
初始化插件

在页面DOM元素加载完毕之后,通过gototop()方法来初始化该返回顶部插件。

$(".gototop").gototop();           
                

配置参数

该返回顶部插件可用的配置参数如下:

$(".gototop").gototop({
    position : 0,
    duration : 1250,
    visibleAt : 300,
    classname : "isvisible"
});
                
  • position:返回到页面顶部的位置。
  • duration:返回顶部平滑过渡动画的持续时间。
  • visibleAt:返回顶部按钮在向下滚动多少像素时可见。
  • classname:自定义返回顶部按钮的CSS class名称。

gototop返回顶部按钮的github地址为:https://github.com/alejandromur/gototop