J'ai besoin d'afficher le bouton backtotop uniquement si l'utilisateur a fait défiler vers le bas> 250. Comment puis-je le faire?
Mon code:
<template>
<div>
<button v-if="checkScroll" class="goTop" @click="backToTop">
<i class="fa fa-angle-up" aria-hidden="true"></i>
</button>
</div>
</template>
<script>
export default {
methods: {
computed: {
checkScroll() {
if ($(document).scrollTop() > 250) {
return true;
} else {
return false;
}
}
},
backToTop() {
this.$scrollTo('html');
},
}
}
</script>
Mon code ne fonctionne pas. Erreurs que je ne reçois pas. Le bouton est masqué.
3 Réponses :
Utilisez l'événement onScroll en Javascript pour détecter quand l'utilisateur fait défiler vers le bas / haut et utilisez scrollTop () pour se déplacer automatiquement vers le haut de la page lorsque le bouton cliqué.
Assurez-vous qu'il est position:fixed;.
Pour plus d'informations, consultez les éléments suivants: onScroll scrollTop ()
Pour afficher / masquer le changez simplement sa taille en utilisant les méthodes HTML DOM. Par exemple:
document.getElementsByClassName("goTop")[0].width = 30;
Un changement mineur, c'est getElementsByClassName au lieu de getElementByClassName . Cela renverra un tableau de boutons donc vous devrez y accéder par son index avant de changer le style, par exemple, document.getElementsByClassName ("goTop") [0] .style.color = "red";
codepen.io propose gratuitement de superbes croquis pour des fonctionnalités en demande comme celle-ci. voici une page de défilement vers le haut de la fonctionnalité que vous pouvez modifier pour répondre à vos besoins, espérons-le https://codepen.io/ rolandtoth / pen / eMamVK
.scrolltop-wrap {
$size: 3rem;
$offsetBottom: 2rem;
$offsetHorizontal: 2rem;
$scrollToRevealDistance: 12rem; // scroll offset to reveal scroll-to-top link
Tout est scss au lieu de javascript. Voici un générateur scss vers css que vous pouvez utiliser, https://www.cssportal.com/ scss-to-css /
N'oubliez pas non plus de détruire l'événement:
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.2/dist/vue.js"></script> <!-- scroll to see the button --> <div id="app"> <button v-show="scroll > 250">foobar</button> </div>
html {
height: 3000px; /* some random height for demonstration purpose */
}
button {
position: fixed;
}
new Vue({
el: "#app",
data() {
return {
scroll: null
}
},
methods: {
handleScroll(e) {
this.scroll = window.scrollY || window.scrollTop
}
},
created() {
window.addEventListener('scroll', this.handleScroll);
},
destroyed() {
window.removeEventListener('scroll', this.handleScroll);
}
})
Je me souviens avoir vu quelque chose sur les tutoriels Web Javascript de w3School sur la position de défilement, mais je ne sais pas où c'est. Attends une minute.