Ancres jQuery
Punz
-
15 sept. 2010 à 14:39
avion-f16 Messages postés 19256 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 septembre 2025 -
avion-f16 Messages postés 19256 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 septembre 2025 -
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();
}
});
});
avion-f16
Messages postés
19256
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
21 septembre 2025
4 509
15 sept. 2010 à 21:17
15 sept. 2010 à 21:17
Salut.
Je ne vois pas de quelle "maison" tu parles.
C'est le petit morceau près de la barre de défilement ?
Si oui, il suffit de placer l'élément en position fixe (position:fixed).
Pour l'effet de défilement :
http://plugins.jquery.com/project/ScrollTo
Je ne vois pas de quelle "maison" tu parles.
C'est le petit morceau près de la barre de défilement ?
Si oui, il suffit de placer l'élément en position fixe (position:fixed).
Pour l'effet de défilement :
http://plugins.jquery.com/project/ScrollTo
