Skip to content

Instantly share code, notes, and snippets.

@arturmamedov
Created November 22, 2016 09:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save arturmamedov/4f10988e5cc9536fe16b4b67b5519559 to your computer and use it in GitHub Desktop.
Save arturmamedov/4f10988e5cc9536fe16b4b67b5519559 to your computer and use it in GitHub Desktop.
To top JS and HTML
<!-- 1 -->
<a href="#" id="totop">TOP</a>
<script>
if ($('#totop').length) {
var scrollTrigger = 100, // px
backToTop = function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > scrollTrigger) {
$('#totop').addClass('show');
} else {
$('#totop').removeClass('show');
}
};
backToTop();
$(window).on('scroll', function () {
backToTop();
});
$('#totop').on('click', function (e) {
e.preventDefault();
$('html,body').animate({
scrollTop: 0
}, 700);
});
}
</script>
<!-- 2 -->
<div class="go2top">
<i class="fa fa-chevron-up"></i>
</div>
<script>
var LayoutGo2Top = function () {
var handle = function () {
var currentWindowPosition = $(window).scrollTop(); // current vertical position
if (currentWindowPosition > 300) {
$(".go2top").show();
} else {
$(".go2top").hide();
}
};
return {
//main function to initiate the module
init: function () {
handle(); // call headerFix() when the page was loaded
if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
$(window).bind("touchend touchcancel touchleave", function (e) {
handle();
});
} else {
$(window).scroll(function () {
handle();
});
}
$(".go2top").on('click', function (e) {
e.preventDefault();
$("html, body").animate({
scrollTop: 0
}, 600);
});
}
};
}();
LayoutGo2Top.init();
</script>
@arturmamedov
Copy link
Author

I personally adopt the second one in https://github.com/arturmamedov/withfront

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment