Desplazamiento suave a div id jQuery


248

He estado tratando de hacer que un desplazamiento al código jquery div div funcione correctamente. Basado en otra pregunta de desbordamiento de pila probé lo siguiente

DEMO http://jsfiddle.net/kevinPHPkevin/8tLdq/

$('#myButton').click(function() {
   $.scrollTo($('#myDiv'), 1000);
});

Pero no funcionó. Simplemente se ajusta al div. También intenté

$('#myButton').click(function(event) {
     event.preventDefault();
   $.scrollTo($('#myDiv'), 1000);
});

Sin progresos.



@TheVanillaThrilla Lo hice pero parecía demasiado hinchado para un solo uso de enlace
StevenPHP

1
@StevenPHP, he reemplazado el código JavaScript en su ejemplo de acuerdo con mi respuesta stackoverflow.com/a/26129950/947687 . Y funciona jsfiddle.net/8tLdq/643 .
dizel3d

El OP es antiguo pero compartiré esta publicación para otros que vienen de SE. Aquí hay un artículo que comparte una función simple para resolver el problema: smartik.ws/2015/01/…
Andrew Surdu

Respuestas:


667

Necesitas animar el html, body

DEMO http://jsfiddle.net/kevinPHPkevin/8tLdq/1/

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);
});

99
@vector Tengo un problema, una vez que se hace clic, tengo que luchar con jquery para desplazarme hacia arriba, ¿alguna solución?
YesItsMe

@yesitsme ... arriba o abajo en mi caso
Gray Spectrum

@GraySpectrum up, solo justo después de hacer clic, parece que hay un retraso.
YesItsMe

1
Tengo la misma pregunta, ¿qué pasa si tengo algunos botones que necesitan desplazarse a diferentes ubicaciones? Intenté modificar este código pero no funciona. ¿Podría por favor dar otro ejemplo?
Dreadlord

Encontré alguna "solución" para ello. El desplazamiento del elemento apropiado ahora está fijo, pero aún así sube y baja haciendo clic en el mismo objetivo "desplazarse hacia": var target = $(this).data("target"); $(".basics-content").animate({scrollTop: $(target).offset().top}, 1000); });Explicación: .basics-contentes el div interno del modal al que realmente quiero desplazarme, con targetel número de identificación del elemento ...
Roland

111

Si desea anular la navegación estándar href-id en la página sin cambiar el marcado HTML para un desplazamiento suave , use esto ( ejemplo ):

// handle links with @href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
    // target element id
    var id = $(this).attr('href');

    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();

    // top position relative to the document
    var pos = $id.offset().top;

    // animated top scrolling
    $('body, html').animate({scrollTop: pos});
});

3
Esto funciona bien, puedo sugerir un pequeño pellizco var pos = $(id).offset().top;puede servar pos = $id.offset().top;
Davey

Muy agradable. Si solo desea que esto suceda en ciertos enlaces (digamos que tiene algunos para mostrar u ocultar información), simplemente agregue un nombre de clase y agregue el nombre de su clase (digamos scroller) al final de la declaración de coincidencia (por ejemplo, un [href ^ = "#"]. desplazamiento).
Privateer

¿Cómo haces eso sin jQuery?
Vadorequest

21

Aquí están mis 2 centavos:

Javascript:

$('.scroll').click(function() {
    $('body').animate({
        scrollTop: eval($('#' + $(this).attr('target')).offset().top - 70)
    }, 1000);
});

HTML:

<a class="scroll" target="contact">Contact</a>

y el objetivo:

<h2 id="contact">Contact</h2>

Esto parece funcionar solo si no declaras doctype.
David Martins

66
¿Para qué sirve evalaquí?
Vidente

Creo que es necesario $('html, body').animatedesplazarse
Irshad Khan

6

Esto es lo que uso:

<!-- jquery smooth scroll to id's -->   
<script>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 500);
        return false;
      }
    }
  });
});
</script>

Lo bueno de este es que puedes usar un número ilimitado de enlaces hash y los identificadores correspondientes sin tener que ejecutar un nuevo script para cada uno.

Si está utilizando WordPress, inserte el código en el footer.phparchivo de su tema justo antes de la etiqueta de cierre del cuerpo </body>.

Si no tiene acceso a los archivos de tema, puede incrustar el código dentro del editor de publicación / página (debe estar editando la publicación en modo Texto) o en un widget de Texto que se cargará en todas las páginas.

Si está utilizando cualquier otro CMS o solo HTML, puede insertar el código en una sección que se carga en todas las páginas justo antes de la etiqueta de cierre del cuerpo </body>.

Si necesita más detalles sobre esto, consulte mi publicación rápida aquí: jQuery desplazamiento suave a id

Espero que ayude, y avíseme si tiene alguna pregunta al respecto.


Amar lo simple y vainilla que es esto, perfecto.
DoPeT

5

Un ejemplo más:

Enlace HTML:

<a href="#featured" class="scrollTo">Learn More</a>

JS:

  $(".scrollTo").on('click', function(e) {
     e.preventDefault();
     var target = $(this).attr('href');
     $('html, body').animate({
       scrollTop: ($(target).offset().top)
     }, 2000);
  });

Ancla HTML:

  <div id="featured">My content here</div>

3

¿está seguro de que está cargando el archivo jQuery scrollTo Plugin?

es posible que obtenga un objeto: método no encontrado Error "scrollTo" en la consola.

El método scrollTO no es un método jquery nativo. para usarlo, debe incluir el archivo jquery scroll To plugin.

ref: http://flesler.blogspot.in/2009/05/jqueryscrollto-142-released.html http://flesler.blogspot.in/2007/10/jqueryscrollto.html

soln: agregue esto en la sección de cabecera.

<script src="\\path\to\the\jquery.scrollTo.js file"></script>

Esta debería haber sido la respuesta aceptada. El código en la pregunta es correcto y funciona bien. Parece que el complemento scrollTo no está / no estaba funcionando. . No preguntó sobre las diferentes formas de hacer algo similar.
Chris Kavanagh

3

Este script es una mejora del script de Vector. Le he hecho un pequeño cambio. Entonces, este script funciona para cada enlace con el desplazamiento de página de clase en él.

Al principio sin suavizar:

$("a.page-scroll").click(function() {
    var targetDiv = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(targetDiv).offset().top
    }, 1000);
});

Para facilitar, necesitará la interfaz de usuario de Jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

Agregue esto al script:

'easeOutExpo'

Final

$("a.page-scroll").click(function() {
    var targetDiv = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(targetDiv).offset().top
    }, 1000, 'easeOutExpo');
});

Todas las facilidades que puedes encontrar aquí: Cheat Sheet .


3

Este código será útil para cualquier enlace interno en la web.

    $("[href^='#']").click(function() {
        id=$(this).attr("href")
        $('html, body').animate({
            scrollTop: $(id).offset().top
        }, 2000);
    });


1

Puede hacerlo utilizando el siguiente código simple de jQuery.

Puede encontrar el tutorial, la demostración y el código fuente desde aquí: desplácese suavemente a div utilizando jQuery

JavaScript:

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.substr(1) +']');
        if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    });
});

HTML:

<a href="#section1">Go Section 1</a>
<div id="section1">
    <!-- Content goes here -->
</div>

1

Aquí probé esto, eso funciona muy bien para mí.

$('a[href*="#"]').on('click', function (e) {
    e.preventDefault();

    $('html, body').animate({
        scrollTop: $($(this).attr('href')).offset().top
    }, 500, 'linear');
});

HTML:

 <a href="#fast-food" class="active" data-toggle="tab" >FAST FOOD</a>

<div id="fast-food">
<p> Scroll Here... </p>
  </div>

¿Qué es diferente en tu respuesta?
yunandtidus


0

Esto me funciona.

<div id="demo">
        <h2>Demo</h2>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
    $(document).ready(function () {
        // Handler for .ready() called.
        $('html, body').animate({
            scrollTop: $('#demo').offset().top
        }, 'slow');
    });
</script>

Gracias.


0

Aquí está mi solución para desplazar suavemente a div / anchor usando jQuery en caso de que tenga un encabezado fijo para que no se desplace debajo. También funciona si lo vincula desde otra página.

Simplemente reemplace ".site-header" para div que contiene su encabezado.

$(function() {

$('a[href*="#"]:not([href="#"])').click(function() {
var headerheight = $(".site-header").outerHeight();
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
  var target = $(this.hash);
  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

  if (target.length) {
    $('html, body').animate({
      scrollTop: (target.offset().top - headerheight)
    }, 1000);
    return false;
  }
}
});

//Executed on page load with URL containing an anchor tag.
if($(location.href.split("#")[1])) {
var headerheight = $(".site-header").outerHeight();
  var target = $('#'+location.href.split("#")[1]);
  if (target.length) {
    $('html,body').animate({
      scrollTop: target.offset().top - headerheight
    }, 1);
    return false;
  }
}
});
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.