Skip to content

Instantly share code, notes, and snippets.

@axxe16

axxe16/css.css

Created Sep 2, 2020
Embed
What would you like to do?
goTop - pulsante torna su #gotop #up #js #button
.goUp {
position: fixed;
right: 20px;
bottom: 20px;
font-size: 30px;
color: $blue;
padding: 0 9.3px;
z-index: 999;
background-color: rgba(0, 0, 0, .3);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
display: none;
}
<!-- nel footer uso font awesome 5 -->
<a class="goUp scroll" href="#top"><i class="fas fa-chevron-up"></i></a>
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 500) {
$('.goUp').fadeIn();
} else {
$('.goUp').fadeOut();
}
});
$(".scroll").click(function(event){
var offset = 230; //offset rispetto a posizione dell'ancora
//customizzo offset con un attributo data il link
if($(this).data('offset')) {
offset = $(this).data('offset');
}
//prevent the default action for the click event
event.preventDefault();
//get the full url - like mysitecom/index.htm#home
var full_url = this.href;
//split the url by # and get the anchor target name - home in mysitecom/index.htm#home
var parts = full_url.split("#");
var trgt = parts[1];
//get the top offset of the target anchor
var target_offset = $("#"+trgt).offset();
var target_top = target_offset.top;
//goto that anchor by setting the body scroll top to anchor top
$('html, body').animate({scrollTop:target_top - offset}, 1500);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.