<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;
}
}
}