Poner un scroll Top para pagina en phpost

[mkal]

Hola!

Queria saber como implementar un Boton que aparezca al llegar el scroll abajo y que al hacer clck me lleve al inicio de la pagina(arriba). ya que algunas entradas con demasiadas largas.

Lo necesito para una web montada sobre phpost, aqui un ejemplo delo que digo.


les agradeceria si encuentran algo, en donde debo colocar el codigo.

gracias!

[Alexis88]

Aplicando estilos y con un poco de jQuery, es posible hacer lo que buscas.

Código HTML:

<span>Arriba</span>
 

Código CSS:

span{
    position: fixed;
    right: 0;
    width: 4em;
    height: 4em;
    background: darkgray;
    color: white;
    font-size: 1.2em;
    text-align: center;
    line-height: 4em;
    cursor: pointer;
    border-radius: 7em;
    display: none;
}
 

Código Javascript:

$(window).scroll(function(){
    if (if ($(this).height() + $(this).scrollTop() == $(document).height()))
        $('span').fadeIn();
    else
        $('span').fadeOut();
});
    
$('span').click(function(){
    $('body, html').animate({
        scrollTop: 0
    }, 1000);
});
 

Con el método scroll, detecto el desplazamiento de la barra de desplazamiento (valga la redundancia) de la ventana. Con el método scrollTop, obtengo la posición actual de la barra de desplazamiento en el eje vertical, luego, si dicho valor más el de la altura de la ventana es igual a la altura del documento, es decir, cuando la barra se encuentre al final y no se pueda bajar más, se mostrará el span con el que realizaremos el desplazamiento hacia la parte superior del documento, caso contrario, se ocultará dicho span. Cuando le demos un clic al span, la barra tomará la posición cero, es decir, se desplazará hasta el tope, regresando así a la parte superior del documento. Dicho desplazamiento demorará 1 segundo que es el valor que establezco en milésimas de segundo en el segundo parámetro del método animate.

DEMO

Saludos

[mkal]

Gracias por responder.

lo que no me queda claron en ¿ donde colocar cada uno de los codigos en el phpost?
por que ya he visto varias opciones pero no puedo colocarlas.

[Alexis88]

Es código JavaScript, por lo tanto, tiene que ir en un archivo con extensión .js y el código CSS debe ir en un archivo con extensión .css. Luego, incluyes a ambos archivos en el documento HTML o PHP con las etiquetas <script> y <link>, respectivamente.

Saludos

[mkal]

Iniciado por Alexis88

Es código JavaScript, por lo tanto, tiene que ir en un archivo con extensión .js y el código CSS debe ir en un archivo con extensión .css. Luego, incluyes a ambos archivos en el documento HTML o PHP con las etiquetas [URL="http://www.w3schools.com/tags/tag_script.asp"][B]<script>[/B][/URL] y [URL="http://www.w3schools.com/tags/tag_link.asp"][B]<link>[/B][/URL], respectivamente.

Saludos

Gracias Alexis al final pude hacerlo, lo que no sabia era exactamente en cuales archivos incluir algunos de los datos. Pero un amigo me ayudo en eso.

Gracias por haberte tomado el tiempo en responder.