Faire défiler en douceur vers le haut

Question

J'ai cherché cela pendant quelques heures maintenant et je n'ai pas de solution. Je veux un défilement fluide vers le haut de la page. J'ai déjà un défilement fluide vers des ancres séparées dans la page avec un fichier .js attaché à mon site mais je ne peux pas utiliser une ancre pour le haut, car j'utilise un modèle d'un site d'hébergement gratuit avec des outils de construction de page intégrés qui ne me permettent pas de modifier au-dessus de la zone du corps.

Ici est où j'ai trouvé le défilement fluide. J'ai essayé de configurer "défilement en douceur vers un élément sans plugin jQuery" mais je n'ai aucune idée de comment l'organiser évidemment après d'innombrables tentatives. J'ai aussi utilisé window.scrollTo(0, 0); mais il défile instantanément. Merci !

En plus : http://jsfiddle.net/WFd3V/ - le code serait probablement la balise class="smoothScroll" puisque mon autre élément utilise cela, mais je ne sais pas comment le mixer avec le href="javascript:window.scrollTo(0,0);", ou tout autre chose qui pourrait ramener la page en haut sans ancre.

Answer 1

J'ai simplement personnalisé la réponse de BootPc Deutschland

Vous pouvez simplement utiliser

    $(document).ready(function(){
        $('body,html').animate({
            scrollTop: 0
        }, 800);
    $('#btn-go-to-top').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 800);
        return false;
    });
}); 

cela vous aidera à faire défiler en douceur jusqu'au haut de la page.

et pour le style

#btn-go-to-top {
opacity: .5;
width:4%;
height:8%;
display: none;
position: fixed;
bottom: 5%;
right: 3%;
z-index: 99;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 10px;
 border-radius: 50%;
}

#btn-go-to-top:hover {
opacity: 1;
}
.top {
transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
}

ce style permet au bouton d'arriver en bas à droite de la page.

et dans votre page vous pouvez ajouter le bouton pour remonter en haut comme ceci

j'espère que cela vous aide. Si vous avez des doutes, vous pouvez toujours me demander librement

Answer 2

Aussi utilisé ci-dessous:

  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;

Answer 3

Si vous utilisez un élément d'ancre pour faire défiler jusqu'en haut de la page et que cela se fait directement sans transition en douceur, supprimez l'attribut href="#".

    function smoothScrollToTop() {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    }

Answer 4

Voici la solution que j'ai trouvée :

function scrollToTop() {
    let currentOffset = window.pageYOffset;
    const arr = [];

    for (let i = 100; i >= 0; i--) {
        arr.push(new Promise(res => {
                setTimeout(() => {
                        res(currentOffset * (i / 100));
                    },
                    2 * (100 - i))
            })
        );
    }

    arr.reduce((acc, curr, index, arr) => {
        return acc.then((res) => {
            if (typeof res === 'number')
                window.scrollTo(0, res)
            return curr
        })
    }, Promise.resolve(currentOffset)).then(() => {
        window.scrollTo(0, 0)
    })
}

Answer 5

La réponse de theMaxx fonctionne dans nuxt/vue, le défilement fluide est le comportement par défaut

Sauter en haut de la page

  methods: {
    scrollToTop() {
      window.scrollTo({ top: 0 });
    }
  }