Desplazamiento suave a div id jQuery

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.

Necesitas animar el html, body

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

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

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

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 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.

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>

¿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>

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 .

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

Esto se puede hacer en JS simple:

document
    .getElementById("range-calculator")
    .scrollIntoView({ behavior: "smooth" });

El soporte del navegador es un problema, pero los navegadores modernos lo admiten .

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>

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>

Este es el más simple. Fuente: https://www.w3schools.com/jsref/met_element_scrollintoview.asp

var elmnt = document.getElementById("content");
elmnt.scrollIntoView();

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.

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