javascript - tablas - ¿Cómo desplazar la página HTML al ancla dada?

obtener datos de una tabla html javascript

Question

Me gustaría hacer que el navegador desplace la página a un anclaje determinado, simplemente utilizando JavaScript.

He especificado un name o atributo de id en mi código HTML:

 <a name="anchorName">..</a>

o

 <h1 id="anchorName2">..</h1>

Me gustaría obtener el mismo efecto que obtendría al navegar a http://server.com/path#anchorName . La página debe desplazarse de manera que el ancla esté cerca de la parte superior de la parte visible de la página.

Answer 1

2018 js puro:

Hay una manera muy conveniente de desplazarse al elemento:

el.scrollIntoView({
  behavior: ''smooth'', // smooth scroll
  block: ''start'' // the upper border of the element will be aligned at the top of the visible part of the window of the scrollable area.
})

Pero, según tengo entendido, no tiene un apoyo tan bueno como las opciones a continuación.

Aprende más sobre el método.

Si es necesario que el elemento esté en la parte superior:

const element = document.querySelector(''#element'')
const top = element.getBoundingClientRect().top

window.scrollTo({
  top, // scroll so that the element is at the top of the view
  behavior: ''smooth'' // smooth scroll
})

Ejemplo de demostración en Codepen

Si quieres que el elemento esté en el centro:

const element = document.querySelector(''#element'')
const rect = element.getBoundingClientRect() // get rects(width, height, top, etc)
const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

window.scroll({
  top: rect.top + rect.height / 2 - viewHeight / 2,
  behavior: ''smooth'' // smooth scroll
});

Ejemplo de demostración en Codepen

Apoyo:

Escriben que scroll es el mismo método que scrollTo , pero el soporte se muestra mejor en scrollTo .

Más sobre el método.

Answer 2

En 2018, no necesitas jQuery para algo tan simple como esto. El [scrollIntoView()][1] incorporado en [scrollIntoView()][1] admite una propiedad de " behavior " para desplazarse sin problemas a cualquier elemento de la página. Incluso puedes actualizar la URL del navegador con un hash para que pueda marcarse como favorito.

A partir de este tutorial sobre el desplazamiento de marcadores HTML , esta es una forma nativa de agregar un desplazamiento suave a todos los enlaces de anclaje en su página automáticamente:

let anchorlinks = document.querySelectorAll(''a[href^="#"]'')
 
for (let item of anchorlinks) { // relitere 
    item.addEventListener(''click'', (e)=> {
        let hashval = item.getAttribute(''href'')
        let target = document.querySelector(hashval)
        target.scrollIntoView({
            behavior: ''smooth'',
            block: ''start''
        })
        history.pushState(null, null, hashval)
        e.preventDefault()
    })
}

Answer 3

Este es un script de trabajo que desplazará la página al ancla. Para configurar, simplemente asigne al enlace de anclaje una identificación que coincida con el atributo de nombre del ancla al que desea desplazarse.

<script>
jQuery(document).ready(function ($){ 
 $(''a'').click(function (){ 
  var id = $(this).attr(''id'');
  console.log(id);
  if ( id == ''cet'' || id == ''protein'' ) {
   $(''html, body'').animate({ scrollTop: $(''[name="'' + id + ''"]'').offset().top}, ''slow''); 
  }
 }); 
});
</script>

Answer 4

Esto funciona:

$(''.scroll'').on("click", function(e) {

  e.preventDefault();

  var dest = $(this).attr("href");

  $("html, body").animate({

    ''scrollTop'':   $(dest).offset().top

  }, 2000);

});

https://jsfiddle.net/68pnkfgd/

Solo agregue la clase ''scroll'' a cualquier enlace que desee animar

Answer 5

Gran solución por jAndy, pero el desplazamiento suave parece tener problemas al funcionar en Firefox.

Escribirlo de esta manera también funciona en Firefox.

(function($) {
    $(document).ready(function() {
         $(''html, body'').animate({
           ''scrollTop'':   $(''#anchorName2'').offset().top
         }, 2000);
    });
})(jQuery);

Answer 6

La mayoría de las respuestas son innecesariamente complicadas.

Si solo quieres saltar al elemento de destino, no necesitas JavaScript:

# the link:
<a href="#target">Click here to jump.</a>

# target element:
<div id="target">Any kind of element.</div>

Si desea desplazarse animadamente hacia el objetivo , consulte la respuesta de @Shahil.

Answer 7

La solución de CSS-Tricks ya no funciona en jQuery 2.2.0. Se lanzará un error de selector:

Error de tiempo de ejecución de JavaScript: error de sintaxis, expresión no reconocida: a [href * = #]: no ([href = #])

Lo arreglé cambiando el selector. El fragmento completo es este:

$(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
      }, 1000);
      return false;
    }
  }
 });
});

Answer 8

Manera más simple:

var element_to_scroll_to = document.getElementById(''anchorName2'');
// Or:
var element_to_scroll_to = document.querySelectorAll(''.my-element-class'')[0];
// Or:
var element_to_scroll_to = $(''.my-element-class'')[0];
// Basically `element_to_scroll_to` just have to be a reference
// to any DOM element present on the page
// Then:
element_to_scroll_to.scrollIntoView();

Answer 9

Puede usar jQuerys .animate() , .offset() y scrollTop . Me gusta

$(document.body).animate({
    ''scrollTop'':   $(''#anchorName2'').offset().top
}, 2000);

enlace de ejemplo: http://jsbin.com/unasi3/edit

Si no quieres animar usa .scrollTop() como

$(document.body).scrollTop($(''#anchorName2'').offset().top);

o javascripts nativo location.hash como

location.hash = ''#'' + anchorid;

Answer 10

Sé que esta pregunta es muy antigua, pero encontré una solución jQuery fácil y simple en css-tricks . Ese es el que estoy usando ahora.

$(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
        }, 1000);
        return false;
      }
    }
  });
});

Answer 11

Una solución javascript pura sin JQuery. Probado en Chrome & Ie, no probado en IOS

function ScrollTo(name) {
  ScrollToResolver(document.getElementById(name));
}

function ScrollToResolver(elem) {
  var jump = parseInt(elem.getBoundingClientRect().top * .2);
  document.body.scrollTop += jump;
  document.documentElement.scrollTop += jump;
  if (!elem.lastjump || elem.lastjump > Math.abs(jump)) {
    elem.lastjump = Math.abs(jump);
    setTimeout(function() { ScrollToResolver(elem);}, "100");
  } else {
    elem.lastjump = null;
  }
}

demostración: https://jsfiddle.net/jd7q25hg/12/

Answer 12

jQuery("a[href^=''#'']").click(function(){
    jQuery(''html, body'').animate({
        scrollTop: jQuery( jQuery(this).attr(''href'') ).offset().top
    }, 1000);
    return false;
});

Answer 13

$(document).ready ->
  $("a[href^=''#'']").click ->
    $(document.body).animate
      scrollTop: $($(this).attr("href")).offset().top, 1000

Answer 14

function scrollTo(hash) {
    location.hash = "#" + hash;
}

No se requiere jQuery en absoluto!