ScrollBottom que desaparece.

[rakshaka]

Hola muchachos tengo éste código y necesito que el boton:

<a href="#" id="scroll-to-bottom" class="scroll-btn bottom"> Scroll <span></span> </a>

Haga efecto de scroll hacia abajo y desaparezca al hacerlo. No puedo dar con el script correcto.


intenté con esto pero no hay caso:

Código Javascript:

Query(document).ready(function() {
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollBottom() > offset) {
            jQuery('.scroll-to-bottom').fadeIn(duration);
        } else {
            jQuery('.scroll-to-bottom').fadeOut(duration);
        }
    });
    
    jQuery('.back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollBottom: 100}, duration);
        return false;
    })
});
 

A ver si pueden ayudarme!

[rakshaka]

Nadie que pueda ayudarme chicos?

[Alexis88]

Solamente debes trabajar con la propiedad scrollTop del body del documento.

Código Javascript:

$("#scroll-to-bottom").click(function(){
    $("body").animate({
        scrollTop: "+=" + $(window).height() * 50
    }, 2000);
    $(this).fadeOut("slow");
});
 
$(window).scroll(function(){
    if ($(this).scrollTop() === 0)
        $("#scroll-to-bottom").fadeIn("slow");
});
 

En este pequeño ejemplo, cuando des un clic en el enlace, se le sumará al valor del scroll la cantidad equivalente multiplicar la altura de la ventana por 50, en realidad puedes multiplicar por otra cifra, pero como es posible visualizar esto en pantallas de grandes dimensiones, pues le doy una cifra alta para que siempre se vaya hasta el final del documento. Como extra, cuando el scroll este en el tope, se volverá a ver el enlace.

DEMO: http://jsfiddle.net/xKb5p/

Saludos

[rakshaka]

Eres un genio, ahora lo miro bien como implementarlo.

[rakshaka]

Por alguna razón no me baja y me deja el link con el #

[rakshaka]

Tengo este que igual no me funciona:

Código Javascript:

$('#scroll-to-top').hide();
    //Check to see if the window is top if not then display button
    $(window).scroll(function () {
        if ($(this).scrollTop() > 200) {
           //$('#scroll-to-top').fadeIn();
           $('#scroll-to-bottom').fadeOut();
        } else {
            //$('#scroll-to-top').fadeOut();
            $('#scroll-to-bottom').fadeIn();
        }
    });
    //Click event to scroll to top
    $('#scroll-to-top').click(function () {
        $('html, body').animate({ scrollTop: 0 }, 800);
       return false;
    });
 

[rakshaka]

Lo tengo que implementar en esta web el probnlema es que no puedo usar un # en el link:

http://www.blackrivercaviar.com.uy/es/

[Alexis88]

1. ¿Te has fijado en el código del demo que te dejé?, te sugiero ver también el código CSS que le asigné al body del documento.
2. Por favor, no publiques mensajes sucesivos sin que hayan mensajes de otros usuarios de por medio, eso va en contra de las políticas del foro.
3. Para evitar colocar el hashtag en la URL, puedes evitar el comportamiento natural del enlace con el método preventDefault y luego realizar lo del scroll.
4. Por favor, revisa la información de cada enlace que adjunto.

Saludos

[rakshaka]

Vi lo que me pasaste y lo que pusiste pero no bajaba por eso.

[Alexis88]

Pues qué raro, lo estoy probando nuevamente y hace el scroll sin problemas. Nuevamente te insto a que revises no solamente el código JS sino también el CSS.

Por si a caso, te paso nuevamente el enlace de la prueba.

- Prueba: http://jsfiddle.net/xKb5p/embedded/result/
- Código fuente: http://jsfiddle.net/xKb5p