Go top button with Scrollmagic

<div id="sm-helper"></div>
<div class="go-top">
  <button id="go-top-trigger" type="button" class="btn btn-link go-top__trigger">
    <i class="far fa-arrow-alt-circle-up"></i>
  </button>
</div>
// go-top
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
    triggerElement: "#sm-helper",
    triggerHook: .8
})
    .on("enter leave", function (e) {
        if (e.state === "DURING") {
            $("#go-top-trigger").addClass("go-top-trigger--show");
        } else {
            $("#go-top-trigger").removeClass("go-top-trigger--show");
        }
    })
    .addIndicators()
    .addTo(controller);
$("#go-top-trigger").click(function () {
    $("html, body").animate({ scrollTop: 0 }, "slow");
});
#sm-helper{
    position: absolute;
    top: 100vh;
    width: 100%;
}
#go-top-trigger{
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 1;
    &:hover{
        opacity: .8;
    }
    transform: translateY(120px);
    &.go-top-trigger--show{
        transform: translateY(0px);
    }
}
.go-top{
    button{
        transition: transform .3s;
        &:hover, &:focus{
            transform: translateY(-5px);
        }
        i{
            color: blue;
            font-size: 30px;
        }
    }
}

Leave a comment

Your email address will not be published. Required fields are marked *