javascript OnePage部分滚动
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript OnePage部分滚动相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="fr-FR">
<body>
<header id="masthead" class="site-header" role="banner">
<!-- OSEF -->
</header>
<main id="front-page" class="content-area site-main" role="main">
<!-- Il ne doit y avoir que des sections à l'intérieur du parent le plus proche ! -->
<section id="truc">
Bla Bla Bla
</section>
<section id="marchin">
Bla Bla Bla
</section>
<section id="chose">
Bla Bla Bla
</section>
<section id="bidule">
Bla Bla Bla
</section>
</main>
<footer id="colophon" class="site-footer clear" role="contentinfo">
<!-- OSEF aussi -->
</footer>
</body>
</html>html, body, main { /* Mettre tous les éléments parents de votre liste de sections */
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
}
section {
height: 100%;
padding: 10%;
box-sizing: border-box;
}/* Initialisation */
var current = 0; /* Va servir à stocker le numéro (l'index) de la section en cours, par défaut 0 (la première donc) */
var scrolling = false; /* Pour savoir si on est en train de scroller, ou pas */
var nbrItem = $('section').length - 1; /* Ici on compte le nombre de sections (-1 car un tableau ça commence à 0 !) */
var ts = 0; /* Va servir à stocker la position de départ du doigt au contact de l'écran sur mobile */
/* Pour le faire fonctionner avec le menu WordPress, utiliser des liens personnalisés avec, par exemple, #machin, #bidule, etc. en lien */
$('#primary-menu a').click(function(e) {
e.preventDefault();
var href = $.attr(this, 'href');
scroller(href);
});
/* S'il y a déjà un hash (par exemple https://monsite.fr/#bidule) dans l'URL au chargement de la page, pour amener l'internaute directement à la bonne section */
if(location.hash) {
setTimeout(function() {
$('main').scrollTop(0);
scroller(location.hash);
}, 1);
}
/* Au contact d'un écran tactile, pour stocker la position de base du doigt */
$(document).bind('touchstart', function (e){
ts = e.originalEvent.touches[0].clientY;
});
/* Au scroll avec la souris ou au moment où le doigt quitte l'écran */
$(document).bind('mousewheel touchend', function(e){
var te = ts;
/* Si c'est un touchend (doigt qui quitte l'écran), on recupère la dernière position du doigt */
if(e.type == 'touchend') {
var te = e.originalEvent.changedTouches[0].clientY;
}
/* On check si on est pas déjà en train de scroller */
if(scrolling != true) {
/* Est-ce qu'on scroll vers le bas ? */
if(e.originalEvent.wheelDelta / 120 < 0 || ts > te + 5) {
/* On check si on est pas déjà à la dernière section */
if(current < nbrItem) {
current++;
scrolling = true;
/* On lance la fonction "scroller" avec comme paramètre l'ID de la section dont l'index correspond à la nouvelle valeur de "current" */
scroller('#'+$('section')[current].id);
}
/* Ou vers le haut ? */
} else if(e.originalEvent.wheelDelta / 120 > 0 || ts < te - 5) {
/* On check si on est pas déjà à la première section */
if(current > 0) {
current--;
scrolling = true;
scroller('#'+$('section')[current].id);
}
}
}
});
function scroller(href) {
/* On check si on est pas déjà à la bonne section */
if($(href).offset().top != 0) {
/* On lance diverses animations avec le scroll */
$('section').animate({
opacity: 0
}, 400).promise().then(function() {
/* Scroll de la page vers la bonne section */
$('main').scrollTop($(href).offset().top + $('main').scrollTop());
/* On remplace la hash dans l'URL avec celui de la nouvelle section en cours */
window.location.hash = href;
/* On (re)-passe l'index de la section en cours à "current", utile si scroll via le menu ou si scroll car hash présent dans l'URL au chargement de la page */
current = $(href).index();
/* On indique qu'on a fini de scroller */
scrolling = false;
/* Animation de sortie si besoin... */
$('section').animate({
opacity: 1
}, 400);
});
}
}以上是关于javascript OnePage部分滚动的主要内容，如果未能解决你的问题，请参考以下文章