博客园返回头部

页脚html

 

<script src="https://files.cnblogs.com/files/zhonglinke/TweenMax.min.js"></script>
<script src="https://files.cnblogs.com/files/zhonglinke/ScrollToPlugin.min.js"></script>
<style type="text/css">
/* 小火箭css */
#gotop1 {
width: 80px;
position: fixed;
bottom: 30px;
cursor: pointer;
z-index: 99998;
right: 3%;
}
/* 小火箭悬停特效 */
#gotop1:hover {
animation: rubberBand 1s;
}

@keyframes rubberBand {
from {
transform: scale3d(1, 1, 1);
}

30% {
transform: scale3d(1.25, 0.75, 1);
}

40% {
transform: scale3d(0.75, 1.25, 1);
}

50% {
transform: scale3d(1.15, 0.85, 1);
}

65% {
transform: scale3d(.95, 1.05, 1);
}

75% {
transform: scale3d(1.05, .95, 1);
}

to {
transform: scale3d(1, 1, 1);
}
}
/* end 小火箭 */

</style>

<span id="gotop1" style="">
<img src="https://www.cnblogs.com/images/cnblogs_com/zhonglinke/1429059/t_huojian1.png" tppabs="http://www.jq22.com/demo/jquery-top20161222/img/huojian.svg" alt="返回顶部小火箭">
</span>
<script type="text/javascript">
/* 选择你喜欢的速度类型，复制下面的某段代码即可。不明处请咨询：qpjk.cc */
$(function() {
// 返回顶部，绑定gotop1图标和gotop2文字事件
$("#gotop1,#gotop2").click(function(e) {
TweenMax.to(window, 1.5, {scrollTo:0, ease: Expo.easeInOut});
var huojian = new TimelineLite();
huojian.to("#gotop1", 1, {rotationY:720, scale:0.6, y:"+=40", ease: Power4.easeOut})
.to("#gotop1", 1, {y:-1000, opacity:0, ease: Power4.easeOut}, 0.6)
.to("#gotop1", 1, {y:0, rotationY:0, opacity:1, scale:1, ease: Expo.easeOut, clearProps: "all"}, "1.4");
});

});
</script>