javascript - content - Suave desplazamiento a div id jQuery

jquery id value

Question

He estado tratando de obtener un desplazamiento al código jQuery de identificación div para que funcione correctamente. Basado en otra pregunta de desbordamiento de pila, intenté lo siguiente

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

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

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

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

Sin progreso

Answer 1

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

es posible que reciba un objeto: el método no encontró el error "scrollTo" en la consola.

el método scrollTO no es un método jquery nativo. para usarlo necesita 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 la cabeza.

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

Answer 2

Este script es una mejora del script de Vector. Le hice un pequeño cambio. Así que este script funciona para cada enlace con la página de la clase-scroll en él.

Al principio sin aliviar:

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

Para facilitar, necesitará Jquery UI:

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

Agregue esto a la secuencia de comandos:

''easeOutExpo''

Final

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

Todos los easings que puedes encontrar aquí: Cheat Sheet .

Answer 3

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>

La belleza de este es que puedes usar un número ilimitado de enlaces hash e identificadores correspondientes sin tener que ejecutar un nuevo script para cada uno.

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

Si no tiene acceso a los archivos de tema, puede insertar el código directamente dentro del editor de la publicación / página (debe editar 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 al respecto, consulte mi publicación rápida aquí: jQuery scroll suave a id

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

Answer 4

Necesitas animar el html, body

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

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

Answer 5

Puedes hacerlo usando el siguiente código jQuery simple.

Tutorial, demostración y código fuente se pueden encontrar desde aquí: desplazamiento suave a div usando 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>

Answer 6

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

// 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});
});

Answer 7

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>

Answer 8

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 de HTML:

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