Volver al Programación / Codificación foro

javascript scrollbar para mantener la posición de una página a otra?

  • lyricsride
  • Newbie
  • Newbie
  • No Avatar
  • Registrado: Jun 29, 2006
  • Mensajes: 11
  • Loc: Montreal
  • Status: Offline

Nota Diciembre 13th, 2006, 1:49 pm

Hey gente, puede alguien me punto en la dirección de un tutorial que explica cómo mantener scrollbar posicionamiento de una página a otra. Actualmente tengo un sistema de noticias con diferentes pestañas que muestran diferentes conjuntos de las noticias. Es PHP / MySQL impulsada. Al hacer clic en una pestaña diferente para mostrar las noticias i no quieren que el scrollbar para saltar a la parte superior.

¡Muchas gracias!
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Diciembre 13th, 2006, 1:49 pm

  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • Avatar de Usuario
  • Registrado: Jul 06, 2004
  • Mensajes: 1890
  • Loc: Las Vegas
  • Status: Offline

Nota Diciembre 14th, 2006, 1:42 am

Se parece que está utilizando href = " #"En las pestañas y un javascript onclick realmente a cambiar la página. Si esa es lo que está haciendo, deshacerse de los href =" #"Y añadir style =" cursor: pointer; ". Eso se detiene el salto.
La href = " #"Dice la página para saltar a la parte superior. La razón es necesario añadir el estilo de anclaje se debe a que las etiquetas sin un href no muestran el puntero.
  • alias8700
  • Beginner
  • Beginner
  • No Avatar
  • Registrado: Dic 04, 2006
  • Mensajes: 43
  • Status: Offline

Nota Diciembre 14th, 2006, 4:01 am

Usted podría intentar esta solución si el hacer una recarga al cambiar de pestañas

primera aplicación de la presente javascript en las páginas que necesita la funcionalidad de
Código: [ Select ]
function doScroll(){
    if (window.name) window.scrollTo(0, window.name);
}
  1. function doScroll(){
  2.     if (window.name) window.scrollTo(0, window.name);
  3. }


El añadir esta la etiqueta de su cuerpo
Código: [ Select ]
onload="doScroll()" onunload="window.name=document.body.scrollTop"


Buena suerte :)
  • lyricsride
  • Newbie
  • Newbie
  • No Avatar
  • Registrado: Jun 29, 2006
  • Mensajes: 11
  • Loc: Montreal
  • Status: Offline

Nota Diciembre 15th, 2006, 4:48 pm

Gracias por los chicos sugerencias. He intentado que el segundo de alias, pero sin éxito. i el código utilizado para poner en práctica es como sigue. Se trata de un archivo php include, header.inc.php.
Código: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/JavaScript" src="../../dynamic_font.js"></script>
<script type="text/JavaScript">
function doScroll(){

  if (window.name) window.scrollTo(0, window.name);

}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="/assets/css/site_master.css" rel="stylesheet" type="text/css" />
<link href="/assets/css/page_main.css"  rel="stylesheet" type="text/css" />
<?PHP
define('EATMOO', TRUE);
require_once($_SERVER['DOCUMENT_ROOT'].'/assets/includes/site_config.inc.php');?>
<title>CODES .::. <?PHP echo $pageTitle;?></title>
</head>

<body>
<script type="text/javascript">onload="doScroll()" onunload="window.name=document.body.scrollTop"</script>
<div class="siteWrapper">
    <img src="assets/img/banner.png" />
    <div class="wrapperLeft">
        <div class="windowLeft"></div>
        <div id="content">
        <?PHP require_once($_SERVER['DOCUMENT_ROOT'].'/assets/includes/site_nav.inc.php');?>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <script type="text/JavaScript" src="../../dynamic_font.js"></script>
  5. <script type="text/JavaScript">
  6. function doScroll(){
  8.   if (window.name) window.scrollTo(0, window.name);
  10. }
  11. </script>
  12. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  13. <link href="/assets/css/site_master.css" rel="stylesheet" type="text/css" />
  14. <link href="/assets/css/page_main.css"  rel="stylesheet" type="text/css" />
  15. <?PHP
  16. define('EATMOO', TRUE);
  17. require_once($_SERVER['DOCUMENT_ROOT'].'/assets/includes/site_config.inc.php');?>
  18. <title>CODES .::. <?PHP echo $pageTitle;?></title>
  19. </head>
  21. <body>
  22. <script type="text/javascript">onload="doScroll()" onunload="window.name=document.body.scrollTop"</script>
  23. <div class="siteWrapper">
  24.     <img src="assets/img/banner.png" />
  25.     <div class="wrapperLeft">
  26.         <div class="windowLeft"></div>
  27.         <div id="content">
  28.         <?PHP require_once($_SERVER['DOCUMENT_ROOT'].'/assets/includes/site_nav.inc.php');?>


Yo uso phps función $ _GET para pasar consultas como "noticias = 3", que son adoptadas por PHP y la carga de las noticias correctas en el panel enfoque mainpage.
  • alias8700
  • Beginner
  • Beginner
  • No Avatar
  • Registrado: Dic 04, 2006
  • Mensajes: 43
  • Status: Offline

Nota Diciembre 16th, 2006, 3:56 am

Lo siento, me doy cuenta de que no expresa claramente mi auto :)

la etiqueta <body> debería tener este aspecto
Código: [ Select ]
<body onload="doScroll()" onunload="window.name=document.body.scrollTop">
  • lyricsride
  • Newbie
  • Newbie
  • No Avatar
  • Registrado: Jun 29, 2006
  • Mensajes: 11
  • Loc: Montreal
  • Status: Offline

Nota Diciembre 16th, 2006, 10:11 am

Gracias Alias, no sin preocupaciones sobre el "ser claro", "Hey por la ayuda! Traté de la ligera alteración como ha sugerido la siguiente manera:

Código: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/JavaScript" src="../../dynamic_font.js"></script>
<script type="text/JavaScript">
function doScroll(){

  if (window.name) window.scrollTo(0, window.name);

}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="/assets/css/site_master.css" rel="stylesheet" type="text/css" />
<link href="/assets/css/page_main.css"  rel="stylesheet" type="text/css" />
<?PHP
define('EATMOO', TRUE);
require_once($_SERVER['DOCUMENT_ROOT'].'/assets/includes/site_config.inc.php');?>
<title>CODES .::. <?PHP echo $pageTitle;?></title>
</head>

<body onload="doScroll()" onunload="window.name=document.body.scrollTop">
<div class="siteWrapper">
    <img src="/assets/img/banner.png" />
    <div class="wrapperLeft">
        <div class="windowLeft"></div>
        <div id="content">
        <?PHP require_once($_SERVER['DOCUMENT_ROOT'].'/assets/includes/site_nav.inc.php');?>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <script type="text/JavaScript" src="../../dynamic_font.js"></script>
  5. <script type="text/JavaScript">
  6. function doScroll(){
  8.   if (window.name) window.scrollTo(0, window.name);
  10. }
  11. </script>
  12. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  13. <link href="/assets/css/site_master.css" rel="stylesheet" type="text/css" />
  14. <link href="/assets/css/page_main.css"  rel="stylesheet" type="text/css" />
  15. <?PHP
  16. define('EATMOO', TRUE);
  17. require_once($_SERVER['DOCUMENT_ROOT'].'/assets/includes/site_config.inc.php');?>
  18. <title>CODES .::. <?PHP echo $pageTitle;?></title>
  19. </head>
  21. <body onload="doScroll()" onunload="window.name=document.body.scrollTop">
  22. <div class="siteWrapper">
  23.     <img src="/assets/img/banner.png" />
  24.     <div class="wrapperLeft">
  25.         <div class="windowLeft"></div>
  26.         <div id="content">
  27.         <?PHP require_once($_SERVER['DOCUMENT_ROOT'].'/assets/includes/site_nav.inc.php');?>


Todavía parece que no hay cambio. Por ejemplo, cuando se carga la página de:

http://codes.local.ca/main/main.php?news=1

para

http://codes.local.ca/main/main.php?news=2

la barra de desplazamiento no mantener una posición.


Usted puede ver una versión en línea en:
http://vpv4.net/codes2/index.php?news=1

Tenga en cuenta que la versión del servidor no tiene actualmente el javascript adecuada. Im sólo muestra la versión de servidor para ayudar a ilustrar el sitio en caso de que no se explicaba lo suficientemente bien como antes. Usted puede seleccionar los puestos de distintas noticias y ver la página de carga se suma a los US $ _GET.


------ editar
una cosa que quería mencionar. ¿Es importante que usted está usando JavaScript en el cuerpo de la etiqueta sin necesidad de declararlo como JavaScript? ¿Cómo funciona el navegador de conocer su trabajo con JavaScript?!
  • lyricsride
  • Newbie
  • Newbie
  • No Avatar
  • Registrado: Jun 29, 2006
  • Mensajes: 11
  • Loc: Montreal
  • Status: Offline

Nota Diciembre 16th, 2006, 11:04 am

haha i descubrió el problema! He hecho un poco de investigación, descubriendo que firefox / netscape utilizar diferentes scrollbar detección de IE. Bueno, que resolvió mi problema; p.

Gracias por toda su ayuda chicos!
  • lyricsride
  • Newbie
  • Newbie
  • No Avatar
  • Registrado: Jun 29, 2006
  • Mensajes: 11
  • Loc: Montreal
  • Status: Offline

Nota Diciembre 16th, 2006, 11:28 am

Este es el código que finalmente utilizado:

Código: [ Select ]
function detectScrollbar()
{
    if (navigator.appName == "Microsoft Internet Explorer")
    {
        window.name=document.body.scrollTop;
    }
    else
    {
        window.name=window.pageYOffset;
    }
}

function doScroll()
{
  if (window.name) window.scrollTo(0, window.name);
}
  1. function detectScrollbar()
  2. {
  3.     if (navigator.appName == "Microsoft Internet Explorer")
  4.     {
  5.         window.name=document.body.scrollTop;
  6.     }
  7.     else
  8.     {
  9.         window.name=window.pageYOffset;
  10.     }
  11. }
  13. function doScroll()
  14. {
  15.   if (window.name) window.scrollTo(0, window.name);
  16. }
  • alias8700
  • Beginner
  • Beginner
  • No Avatar
  • Registrado: Dic 04, 2006
  • Mensajes: 43
  • Status: Offline

Nota Diciembre 16th, 2006, 1:04 pm

agradable!
  • Stigma
  • Born
  • Born
  • No Avatar
  • Registrado: Feb 07, 2008
  • Mensajes: 1
  • Status: Offline

Nota Febrero 7th, 2008, 4:50 am

ScienceOfSpock, muchas gracias por este post. He venido luchando durante horas para llegar a esta cifra. Tengo una página con múltiples "Añadir más" en los vínculos y cuando uno hace clic en su ventana Thickbox se utiliza como un "popup". La ventana contiene un formulario y validación utiliza ajax. Pero cada vez que he hecho clic en "Agregar" (un hipervínculo en el formulario con la href = " #"Set), que saltó a la parte superior de la página.

Esto fue realmente frustrante mí, sino su posterior me ayudó a la figura hacia fuera.
Gracias de nuevo.

Mantener el buen trabajo chicos.
  • sammiej
  • Born
  • Born
  • No Avatar
  • Registrado: Ago 07, 2010
  • Mensajes: 2
  • Loc: Caribbean
  • Status: Offline

Nota Agosto 8th, 2010, 6:49 am

Hey,

Lo mismo de mí! Gracias por otro gran solución!

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 11 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 202 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC