page - read attr value jquery

jQuery desplazarse a ID desde otra página

Question

Estaba tratando de usar el desplazamiento de página de jQuery dentro de algunas páginas y podría hacer un desplazamiento de página sin problemas. El único problema que tengo ahora es cuando intento hacer eso desde otra página. Lo que quiero decir es que si hago clic en un enlace en una página, debería cargar la nueva página y luego desplazarse al elemento div específico.

Aquí está el código que solía desplazar dentro de la página:

var jump=function(e)
{
//prevent the "normal" behaviour which would be a "hard" jump
e.preventDefault();
//Get the target
var target = $(this).attr("href");
//perform animated scrolling
$(''html,body'').animate(
{
//get top-position of target-element and set it as scroll target
scrollTop: $(target).offset().top
//scrolldelay: 2 seconds
},2000,function()
{
//attach the hash (#jumptarget) to the pageurl
location.hash = target;
});
}
$(document).ready(function()
{
$(''a[href*=#]'').bind("click", jump);
return false;
});

Espero que la idea sea clara.

Gracias

Nota muy importante : Este código que publiqué arriba funciona muy bien dentro de la misma página, pero lo que busco es hacer clic en un enlace de una página e ir a otro y luego desplazarme hasta el objetivo. Espero que esté claro ahora. Gracias

Answer 1

Básicamente necesitas hacer esto:

• incluir el hash de destino en el enlace que apunta a la otra página ( href="other_page.html#section" )
• en su manejador ready borre el desplazamiento del salto duro normalmente dictado por el hash y tan pronto como sea posible, desplace la página de nuevo a la parte superior y llame a jump() : tendrá que hacer esto de forma asíncrona.
• en jump() si no se da ningún evento, make location.hash the target
• también es posible que esta técnica no atrape el salto a tiempo, por lo que será mejor que ocultes el html,body enseguida y lo muestres una vez que lo volviste a cero

Este es su código con lo anterior agregado:

var jump=function(e)
{
if (e){
e.preventDefault();
var target = $(this).attr("href");
}else{
var target = location.hash;
}
$(''html,body'').animate(
{
scrollTop: $(target).offset().top
},2000,function()
{
location.hash = target;
});
}
$(''html, body'').hide();
$(document).ready(function()
{
$(''a[href^=#]'').bind("click", jump);
if (location.hash){
setTimeout(function(){
$(''html, body'').scrollTop(0).show();
jump();
}, 0);
}else{
$(''html, body'').show();
}
});

Trabajo verificado en Chrome / Safari, Firefox y Opera. Sin embargo, sobre IE no.

Answer 2

Combinando respuestas de Petr y Sarfraz, llegué a lo siguiente.

En la página1.html:

<a href="page2.html#elementID">Jump</a>

En la página2.html:

<script type="text/javascript">
$(document).ready(function() {
$(''html, body'').hide();
if (window.location.hash) {
setTimeout(function() {
$(''html, body'').scrollTop(0).show();
$(''html, body'').animate({
scrollTop: $(window.location.hash).offset().top
}, 1000)
}, 0);
}
else {
$(''html, body'').show();
}
});
</script>

Answer 3

En el enlace ponga un hash:

<a href="otherpage.html#elementID">Jump</a>

Y en otra página, puedes hacer:

$(''html,body'').animate({
scrollTop: $(window.location.hash).offset().top
});

En otra página, debe tener un elemento con id establecido en elementID para desplazarse a. Por supuesto, puedes cambiar el nombre de la misma.

Answer 4

He escrito algo que detecta si la página contiene el ancla en la que se hizo clic, y si no, va a la página normal; de lo contrario, se desplaza a la sección específica:

$(''a[href*=//#]'').on(''click'',function(e) {
var target = this.hash;
var $target = $(target);
console.log(targetname);
var targetname = target.slice(1, target.length);
if(document.getElementById(targetname) != null) {
e.preventDefault();
}
$(''html, body'').stop().animate({
''scrollTop'': $target.offset().top-120 //or the height of your fixed navigation
}, 900, ''swing'', function () {
window.location.hash = target;
});
});

Answer 5

Hice un complemento reutilizable que puede hacer esto ... Dejé el enlace a eventos fuera del plugin en sí porque siento que es demasiado intrusivo para un pequeño ayudante ...

jQuery(function ($) {
/**
* This small plugin will scrollTo a target, smoothly
*
* First argument = time to scroll to the target
* Second argument = set the hash in the current url yes or no
*/
$.fn.smoothScroll = function(t, setHash) {
// Set time to t variable to if undefined 500 for 500ms transition
t = t || 500;
setHash = (typeof setHash == ''undefined'') ? true : setHash;
// Return this as a proper jQuery plugin should
return this.each(function() {
$(''html, body'').animate({
scrollTop: $(this).offset().top
}, t);
// Lets set the hash to the current ID since if an event was prevented this doesn''t get done
if (this.id && setHash) {
window.location.hash = this.id;
}
});
};
});

Ahora siguiente, podemos hacer solo esto, verificar si hay un hash y si está allí, intentar usarlo directamente como un selector para jQuery. Ahora no podría probar esto fácilmente en el momento, pero hice cosas similares para sitios de producción no hace mucho, si esto no funciona inmediatamente házmelo saber y buscaré la solución que obtuve allí.

(el script debe estar dentro de una sección de carga)

if (window.location.hash) {
window.scrollTo(0,0);
$(window.location.hash).smoothScroll();
}

A continuación, vinculamos el complemento a onclick de anclajes que solo contienen un hash en su atributo href.

(el script debe estar dentro de una sección de carga)

$(''a[href^="#"]'').click(function(e) {
e.preventDefault();
$($(this).attr(''href'')).smoothScroll();
});

Dado que jQuery no hace nada si la coincidencia falla, tenemos una buena alternativa para cuando no se puede encontrar un objetivo en una página yay / o /

Actualizar

Controlador onclick alternativo para desplazarse a la parte superior cuando solo hay un hash:

$(''a[href^="#"]'').click(function(e) {
e.preventDefault();
var href = $(this).attr(''href'');
// In this case we have only a hash, so maybe we want to scroll to the top of the page?
if(href.length === 1) { href = ''body'' }
$(href).smoothScroll();
});

Aquí también hay un jsfiddle simple que muestra el desplazamiento dentro de la página, onload es un poco difícil de configurar ...

http://jsfiddle.net/sg3s/bZnWN/

Actualización 2

Por lo tanto, puede tener problemas con la ventana que ya se desplaza al elemento de carga. Esto corrige que: window.scrollTo(0,0); simplemente desplaza la página hacia la parte superior izquierda. Se agregó al fragmento de código anterior.

Answer 6

Me gustaría recomendar el uso del plugin scrollTo

http://demos.flesler.com/jquery/scrollTo/

Puede configurar el selector scrollto por jquery css.

$(''html,body'').scrollTo( $(target), 800 );

He tenido mucha suerte con la precisión de este complemento y sus métodos, donde otros métodos para lograr el mismo efecto como usar .offset() o .position() no han sido cruzados en el pasado. No digo que no puedas usar esos métodos, estoy seguro de que hay una forma de hacerlo cruzado de navegador, acabo de encontrar scrollTo para ser más confiable.

Answer 7

function scroll_down(){
$.noConflict();
jQuery(document).ready(function($) {
$(''html, body'').animate({
scrollTop : $("#bottom").offset().top
}, 1);
});
return false;
}

aquí "abajo" es la identificación de la etiqueta div a la que desea desplazarse. Para cambiar los efectos de animación, puede cambiar el tiempo de ''1'' a un valor diferente