Skip to main content
se añadieron 1194 caracteres en el cuerpo
Origen Enlace
lois6b
  • 7.6k
  • 5
  • 33
  • 54

Sin jQuery encontré esta funcion recursiva. Lo hace aunque lo de smooth es cuestionable ahahha

function scrollTo(duration) {
    var element = document.body;
    var to = document.getElementById("p").offsetTop;
    
    if (duration <= 0) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 10;

    setTimeout(function() {
        element.scrollTop = element.scrollTop + perTick;
        if (element.scrollTop === to) return;
        scrollTo( duration - 10);
    }, 10);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button" onclick="scrollTo(600)"> myButton </button>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<div style="height: 500px;"></div>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<p id="p"> myParragraph </p>

<div style="height: 1500px;"></div>


Sin jQuery encontré esta funcion recursiva. Lo hace aunque lo de smooth es cuestionable ahahha

function scrollTo(duration) {
    var element = document.body;
    var to = document.getElementById("p").offsetTop;
    
    if (duration <= 0) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 10;

    setTimeout(function() {
        element.scrollTop = element.scrollTop + perTick;
        if (element.scrollTop === to) return;
        scrollTo( duration - 10);
    }, 10);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button" onclick="scrollTo(600)"> myButton </button>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<div style="height: 500px;"></div>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<p id="p"> myParragraph </p>

<div style="height: 1500px;"></div>

se añadieron 94 caracteres en el cuerpo
Origen Enlace
lois6b
  • 7.6k
  • 5
  • 33
  • 54

Puedes usar jquery para animar el scroll.

usando el metodo animate le dices el tiempo que quieres que tarde.

Por ejemplo poniendo 500 tardaría medio segundo al estar usando milisegundos.

function scroll() {

  $('html, body').animate({
      scrollTop: $("#p").offset().top
    },
    500);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button" onclick="scroll()"> myButton </button>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<div style="height: 500px;"></div>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<p id="p"> myParragraph </p>

<div style="height: 1500px;"></div>

Para lo que pides de poder pasar una unidad y que se desplace pixeles en vez de a un elemento, puedes decir que se mueva hasta el elemento que haces click y una cantidad de pixeles extra.

La dirección sería con el + o el -. Siendo hacia abajo y hacia arriba respectivamente.

function scroll() {

  $('html, body').animate({
      scrollTop: $("#button").offset().top + 500
    },
    500);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button" onclick="scroll()"> myButton </button>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<div style="height: 500px;"></div>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<p id="p"> myParragraph </p>

<div style="height: 1500px;"></div>

Respecto a por que no te funciona tu smooth quizá sea porque solo tiene compatibilidad con Firefox. (mira la tabla de compatibilidad del link que pusiste)

Puedes usar jquery para animar el scroll.

usando el metodo animate le dices el tiempo que quieres que tarde.

Por ejemplo poniendo 500 tardaría medio segundo al estar usando milisegundos.

function scroll() {

  $('html, body').animate({
      scrollTop: $("#p").offset().top
    },
    500);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button" onclick="scroll()"> myButton </button>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<div style="height: 500px;"></div>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<p id="p"> myParragraph </p>

<div style="height: 1500px;"></div>

Para lo que pides de poder pasar una unidad y que se desplace pixeles en vez de a un elemento, puedes decir que se mueva hasta el elemento que haces click y una cantidad de pixeles extra.

function scroll() {

  $('html, body').animate({
      scrollTop: $("#button").offset().top + 500
    },
    500);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button" onclick="scroll()"> myButton </button>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<div style="height: 500px;"></div>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<p id="p"> myParragraph </p>

<div style="height: 1500px;"></div>

Respecto a por que no te funciona tu smooth quizá sea porque solo tiene compatibilidad con Firefox. (mira la tabla de compatibilidad del link que pusiste)

Puedes usar jquery para animar el scroll.

usando el metodo animate le dices el tiempo que quieres que tarde.

Por ejemplo poniendo 500 tardaría medio segundo al estar usando milisegundos.

function scroll() {

  $('html, body').animate({
      scrollTop: $("#p").offset().top
    },
    500);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button" onclick="scroll()"> myButton </button>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<div style="height: 500px;"></div>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<p id="p"> myParragraph </p>

<div style="height: 1500px;"></div>

Para lo que pides de poder pasar una unidad y que se desplace pixeles en vez de a un elemento, puedes decir que se mueva hasta el elemento que haces click y una cantidad de pixeles extra.

La dirección sería con el + o el -. Siendo hacia abajo y hacia arriba respectivamente.

function scroll() {

  $('html, body').animate({
      scrollTop: $("#button").offset().top + 500
    },
    500);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button" onclick="scroll()"> myButton </button>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<div style="height: 500px;"></div>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<p id="p"> myParragraph </p>

<div style="height: 1500px;"></div>

Respecto a por que no te funciona tu smooth quizá sea porque solo tiene compatibilidad con Firefox. (mira la tabla de compatibilidad del link que pusiste)

se eliminaron 46 caracteres en el cuerpo
Origen Enlace
lois6b
  • 7.6k
  • 5
  • 33
  • 54

Puedes usar jquery para animar el scroll.

usando el metodo animate le dices el tiempo que quieres que tarde.

Por ejemplo poniendo 500 tardaría medio segundo al estar usando milisegundos.

function scroll() { 

  const$('html, abody').animate({
 = document    scrollTop: $("#p").getElementByIdoffset("p").top
    },
    500);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button" onclick="scroll()"> myButton </button>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<div style="height: 500px;"></div>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<p id="p"> myParragraph </p>

<div style="height: 1500px;"></div>

Para lo que pides de poder pasar una unidad y que se desplace pixeles en vez de a un elemento, puedes decir que se mueva hasta el elemento que haces click y una cantidad de pixeles extra.

function scroll() {

  $('html, body').animate({
      scrollTop: $("#p""#button").offset().top + 500
    },
    500);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button" onclick="scroll()"> myButton </button>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<div style="height: 500px;"></div>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<p id="p"> myParragraph </p>

<div style="height: 1500px;"></div>

Respecto a por que no te funciona tu smooth quizá sea porque solo tiene compatibilidad con Firefox. (mira la tabla de compatibilidad del link que pusiste)

Puedes usar jquery para animar el scroll.

usando el metodo animate le dices el tiempo que quieres que tarde.

Por ejemplo poniendo 500 tardaría medio segundo al estar usando milisegundos.

function scroll() {
  const a = document.getElementById("p");
  $('html, body').animate({
      scrollTop: $("#p").offset().top 
    },
    500);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button" onclick="scroll()"> myButton </button>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<div style="height: 500px;"></div>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<p id="p"> myParragraph </p>

<div style="height: 1500px;"></div>

Respecto a por que no te funciona tu smooth quizá sea porque solo tiene compatibilidad con Firefox. (mira la tabla de compatibilidad del link que pusiste)

Puedes usar jquery para animar el scroll.

usando el metodo animate le dices el tiempo que quieres que tarde.

Por ejemplo poniendo 500 tardaría medio segundo al estar usando milisegundos.

function scroll() { 

  $('html, body').animate({
      scrollTop: $("#p").offset().top
    },
    500);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button" onclick="scroll()"> myButton </button>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<div style="height: 500px;"></div>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<p id="p"> myParragraph </p>

<div style="height: 1500px;"></div>

Para lo que pides de poder pasar una unidad y que se desplace pixeles en vez de a un elemento, puedes decir que se mueva hasta el elemento que haces click y una cantidad de pixeles extra.

function scroll() {

  $('html, body').animate({
      scrollTop: $("#button").offset().top + 500
    },
    500);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button" onclick="scroll()"> myButton </button>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<div style="height: 500px;"></div>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<p id="p"> myParragraph </p>

<div style="height: 1500px;"></div>

Respecto a por que no te funciona tu smooth quizá sea porque solo tiene compatibilidad con Firefox. (mira la tabla de compatibilidad del link que pusiste)

Origen Enlace
lois6b
  • 7.6k
  • 5
  • 33
  • 54
Loading