bootstrap案例

Posted 2021-12-23 qq_54110518

在浏览到页面最底部时可以点击小火箭回到顶部

小火箭插件css使用
    /* 小火箭css */
    #gotop1
        width: 80px;
        position: fixed;
        bottom: 90px;
        cursor: pointer;
        z-index: 99998;
        right: 50%;
        margin-right: -620px;
    

 

    /* 小火箭悬停特效 */

    #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 小火箭 */

绑定事件

<script type="text/javascript">
        // 返回顶部，绑定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>