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

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名称。