JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<!-- El elemento al que le vas adar click para que se mueva el scroll debe tener en el href el valor del id al que quieres direccionar.

//ejemplo si quieres direcionar el scroll al div <div id="seccion2"></div> el href de debe ir así <a href="#seccion2"></a> 

ahora es solo animar el scroll con la función animate de jquery-->


<section></section>
<a href="#seccion5" class="moveSroll">Click</a>
<section></section>
<section></section>
<section id="seccion5"></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>

CSS

section{
    height:200px;
    background:#ccc;
    border-bottom:2px solid #B0B0B0;
    position:relative;
}
.moveSroll{
    position:absolute;
    left:50%;
    top:184px;
    margin-left:-25px;
    text-decoration:none;
    width:50px;
    height:50px;
    border-radius:50%;
    background:#333;
    color:#fff;
    line-height:50px;
    z-index:10;
    text-align:center;
    transition:.5s;
    -webkit-transition:.5s;
}
.moveSroll:hover{
    transform:scale(1.1);
    -webkit-transform:scale(1.1);
}

JavaScript

$(function(){
    $('.moveSroll').click(function(){
        var $id = $(this).attr('href');
        if($id.length){
            var $scroll = $($id).offset().top;
            $('html, body').animate({scrollTop: $scroll},1000);
        }
    });
});


/*explicación codigo:

1. le decimos que cuando le de click a .moverScroll le saque el valor que  tenga el href, en este caso #seccion2

2. luego hacemos un if donde preguntamos si el elemento que viene en el href existe en la página haga lo siguiente:

3. en la variable $scroll sacamos la distancia del elemento desde el top de la página hasta el mismo;

4. ya teniendo la distancia por ultimo le decimos que tome el scroll de html y el body y lo mueva a la distancia de valor que tiene la variable $scroll y el numero "1000" hace referencia al tiempo que quieres que se demore el scroll en animarse :D */