Ancres jQuery
Punz
-
avion-f16 Messages postés 19256 Date d'inscription Statut Contributeur Dernière intervention -
avion-f16 Messages postés 19256 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
Alors voilà, je me balladais sur le web quand je suis tombé sur ce site :
https://wooconcept.com/
J'aimerai simplement savoir si quelqu'un connaissait un plugin jQuery qui pourrait remplir la même tâche que celui employé sur le site (d'ailleurs introuvable).
Je parle donc de la petite maison qui apparaît lorsque l'on se trouve assez bas et qui permet de revenir en haut de page.
Et tant que j'y suis si vous aviez des petits plugins du type Smooth Anchors compatible multi-navigateur ça serait pas de refus non plus :) !
Merci.
Alors voilà, je me balladais sur le web quand je suis tombé sur ce site :
https://wooconcept.com/
J'aimerai simplement savoir si quelqu'un connaissait un plugin jQuery qui pourrait remplir la même tâche que celui employé sur le site (d'ailleurs introuvable).
Je parle donc de la petite maison qui apparaît lorsque l'on se trouve assez bas et qui permet de revenir en haut de page.
Et tant que j'y suis si vous aviez des petits plugins du type Smooth Anchors compatible multi-navigateur ça serait pas de refus non plus :) !
Merci.
2 réponses
Pour les ancres :
// anchor links
$(function(){
$('a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
Pour le fade sur l'ancre Top :
// fade nav
$(function () {
$('#scrolling').hide();
$(window).scroll(function () {
if ($(this).scrollTop() >= 200) {
$('#scrolling').fadeIn();
} else {
$('#scrolling').fadeOut();
}
});
});
// anchor links
$(function(){
$('a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
Pour le fade sur l'ancre Top :
// fade nav
$(function () {
$('#scrolling').hide();
$(window).scroll(function () {
if ($(this).scrollTop() >= 200) {
$('#scrolling').fadeIn();
} else {
$('#scrolling').fadeOut();
}
});
});
