Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ScrollTop Button with jQuery
<!-- scrolltop begin -->
<div class="scrolltop-placeholder">
<div class="scrolltop scrolltop_hidden js-scrolltop">
<span class="scrolltop__caret"></span>
<span class="scrolltop__text">Top</span>
</div>
</div>
<!-- scrolltop end -->
/**
* ScrollTop Button
*/
$(function () {
var $body = $('body, html');
var $scrolltop = $('.js-scrolltop');
$scrolltop.on('click', function () {
$body.animate({
scrollTop: 0,
}, 500);
});
var $window = $(window);
$window.on('scroll', function () {
if ($window.scrollTop() > 250) {
$scrolltop.removeClass('scrolltop_hidden');
} else {
$scrolltop.addClass('scrolltop_hidden');
}
});
}());
.scrolltop
text-align center
cursor pointer
position absolute
top 0
right 530px
padding 15px
color #106cb6
transition opacity 0.25s ease 0s
&_hidden
opacity 0
&-placeholder
position fixed
top 50%
left 50%
&__text
text-decoration underline
display block
&__caret
size = 5px
border-left size solid transparent
border-right size solid transparent
border-bottom size solid
display inline-block
height 0
margin 0 auto 5px
vertical-align middle
width 0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment