Come mantenere la posizione di scorrimento della pagina dopo l'esecuzione di un evento jQuery?

Ho cercato in alto e in basso per una risposta e ho trovato esempi simili del problema, ma le risposte non si applicano al mio scenario. La realtà è che sono nuovo a questo e quindi non ho le capacità per adattare le risposte che ho trovato al mio problema.Come mantenere la posizione di scorrimento della pagina dopo l'esecuzione di un evento jQuery?

Il problema:

Ho un Div, in cui quando una miniatura si fa clic l'immagine Div sostituisce con un'altra immagine tramite uno script JavaScript/jQuery (non sono sicuro esattamente forse qualcuno potrebbe chiarire). Funziona bene, tuttavia il problema è che la pagina scorre verso l'alto e l'utente deve quindi tornare indietro per vedere l'immagine dopo che è stata sostituita.

Ho cercato online e ho trovato che un ritorno falso: in JavaScript può aiutare comunque ho guardato e restituito falso è già presente.

L'altra opzione che ho preso in considerazione è una soluzione basata su cookie JavaScript in cui viene inviato un cookie e la posizione di scorrimento del browser viene mantenuta leggendo il cookie ma non riesco a far funzionare la soluzione, penso che problema può essere causato perché sto hosting localmente ma potrei sbagliarmi ...

Il terzo sta usando uno script PHP ma non ho trovato una risposta definitiva su questo metodo e significa anche che ho intenzione di imparare su PHP (qualcosa sono sicuro che dovrò imparare in tempo comunque).

Ecco il JavaScript:

<script type="text/javascript"> 

$(document).ready(function() { 
    $('.galleryicon').live("click", function() { 

    $('#mainImage').hide(); 
    $('#cakebox').css('background-image', "url('ajax-loader.gif')"); 
    var i = $('<img />').attr('src',this.href).load(function() { 
     $('#mainImage').attr('src', i.attr('src')); 
     $('#cakebox').css('background-image', 'none'); 
     $('#mainImage').fadeIn(); 
    }); 
    return false; 
    }); 
}); 

</script>

Ecco il codice html:

<div class="cakecont"> 

    <div id="cakebox"> 

<img src="../images/cakes/babycake1.png" alt="Main Image" id="mainImage"/> 

    <div class="pageinfo2"> 
    <h3>Cake Type 1</h3> 
    <h6>£2.00</h6> 
    </div> 
    <div class="infobox"> 
    <h6> Description </h6> 
    </div> 

     <div class="gallerybox"> 
     <a href="../images/cakes/babycaketop.png" class="galleryicon"> 
     <img src="../images/thumbs/babycaketopsml.png" alt="Thumbnail 2"/></a> 

     <a href="../images/cakes/babycake1.png" class="galleryicon"> 
     <img src="../images/thumbs/babycakesml.png" alt="Image 1"/></a> 
    </div> 
    </div> 
</div>

Ed ecco un link alla demo di lavoro http://micahcarrick.com/code/jquery-image-swap/index.html

ho cercato di risolvere questo sul mio proprio. Questa è la prima domanda che ho chiesto finora riguardo alla costruzione del mio sito web, tutti i miei apprendimenti e i rimedi ai problemi del passato sono stati forniti da Google, questo ha eluso le mie capacità nei motori di ricerca.

Sotto ho aggiunto tutto il codice HTML della pagina nel caso in cui ci può essere altro script sovrascrivendo il JavaScript "nuovo" modificato -

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Cupcakes &amp; Cakes for Birthday/Wedding Gift in Bournemouth Dorset - SweetVision</title> 
    <meta name="keywords" content="cupcakes, cake, gift, wedding, birthday, Bournemouth, Dorset" /> 
<meta name="description" content="For the finest Cupcakes and Cakes in Bournemouth Dorset look no further, Sweetvision specialise in baked goods for Weddings, Birthdays, Baby Showers, Easter, Halloween, Christmas" /> 
<meta name="robots" content="ALL" /> 
<meta http-equiv= "Content-Language" content="en" /> 
<meta name="Publisher" content="Sweet Vision" /> 
<meta name="Copyright" content="Copyright 2012, Sweet Vision, All rights reserved." /> 
<meta name="Author" content="Mark Webb for Sweet Vision - www.sweetvision.co.uk" /> 

    <link href="../images/homepage/favicon.ico" type="image/vnd.microsoft.icon" rel="shortcut icon" /> 

    <link href="../root/css/sweetvision.css" rel="stylesheet" type="text/css" /> 

    <script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script> 

    <script type="text/javascript"> 

$(document).ready(function() { 
$('.galleryicon').live("click", function(e) { // the (e) represent the event 
$('#mainImage').hide();  
$('#cakebox').css('background-image', "url('ajax-loader.gif')");  
var i = $('<img />').attr('src',this.href).load(function() {   
    $('#mainImage').attr('src', i.attr('src'));   
    $('#cakebox').css('background-image', 'none');   
    $('#mainImage').fadeIn();  
}); 
e.preventDefault(); //Prevent default click action which is causing the 
return false;  //page to scroll back to the top 
}); 
}); 


</script> 

<script src="../js/s3Slider.js" type="text/javascript"></script> 

<script type="text/javascript"> 

$(document).ready(function() { 
$('#s3slider').s3Slider({ 
    timeOut: 4000 
    }); 
}); 
    </script> 

    <script src="../js/SpryMenuBar.js" type="text/javascript"></script> 
    <link href="../root/css/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" /> 

    </head> 


<body> 



    <div class="container"> 


<div class="sprybox"> 
    <ul id="check_menu" class="MenuBarHorizontal"> 
    <li><a href="../root/index.html">Home</a></li> 
    <li><a href="../root/aboutus.html" class="MenuBarItemSubmenu">About Us</a> 
     <ul> 
     <li><a href="../root/contactus.html">Contact</a></li> 
     <li><a href="../root/news.html">News</a></li> 
     <li><a href="../root/events.html">Events</a></li> 
     </ul> 
    </li> 
     <li><a href="../root/ourmenu.html">Our Menu</a></li> 
     <li><a href="gallery.html">Gallery</a></li> 
      </ul> 
     <div class="mainmenu"> 
      <a href="../root/mainmenu.html"> 
      <img src="../images/buttons/mainmenu.png" /> 
      </a> 
     </div> 
     <div class="backbutton"> 
     <a href="javascript:history.go(-1)"> 
     <img src="../images/buttons/Backbutton.png" /></a> 
     </div> 

    </div> <!-- end.header --><!--end of sprybox --> 

    <!--end div element --> 


<!-- thumbnails are links to the full size image --> 

    <div class="cakecont"> 

<div id="cakebox"> 

    <img src="../images/cakes/babycake1.png" alt="Main Image" id="mainImage"/> 

    <div class="pageinfo2"> 
    <h3>Cake Type 1</h3> 
    <h6>£2.00</h6> 
    </div> 
    <div class="infobox"> 
    <h6> Description </h6> 
    </div> 

<div class="gallerybox"> 
     <a href="../images/cakes/babycaketop.png" class="galleryicon"> 
     <img src="../images/thumbs/babycaketopsml.png" alt="Thumbnail 2"/></a> 

     <a href="../images/cakes/babycake1.png" class="galleryicon"> 
     <img src="../images/thumbs/babycakesml.png" alt="Image 1"/></a> 
    </div> 
    </div> 
</div> 



<div class="footer"> 
    <p>Copyright &copy; 2012 by Mark Webb. All rights reserved.</p> 
</div> <!-- end .footer --> 

</div> <!-- end .container --> 


<script type="text/javascript"> 
var MenuBar1 = new Spry.Widget.MenuBar("check_menu",{imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"}); 
    </script> 

<script type="text/javascript"> 

    var _gaq = _gaq || []; 
_gaq.push(['_setAccount', 'UA-29457683-1']); 
    _gaq.push(['_trackPageview']); 

    (function() { 
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
    })(); 

</script> 


</body> 
</html>

fonte

2012-05-31 marky

Quando visito pagina, non vedo alcun barre di scorrimento. L'intera pagina si adatta allo schermo. Stai usando una risoluzione più piccola? – kevin628

sì, sono su un laptop, quindi ho l'effetto di scorrimento, grazie. – marky

È possibile salvare la quantità di scorrimento corrente e quindi impostare in un secondo momento:

var tempScrollTop = $(window).scrollTop(); 

..//Your code 

$(window).scrollTop(tempScrollTop);

fonte

2012-05-31 15:35:40 Briguy37

Grazie per la tua risposta, ma non sono sicuro su dove implementare il tuo codice, ho poco da nessuna conoscenza di Javascript. – marky

@ user1428659: per ogni clic, si desidera salvare la posizione di scorrimento prima di eseguire qualsiasi operazione, quindi ripristinarla una volta che tutto è terminato. Pertanto, inserirai la prima riga all'inizio della funzione di clic e l'ultima riga alla fine di essa (prima dell'istruzione return). – Briguy37

@ user1428659: Hmmm, ho appena guardato di nuovo il tuo codice e potrebbe non funzionare perché sembra che sia asincrono (il fadeIn non viene chiamato prima dello scroll di ripristino). Quindi, se ciò non funziona per te, metti la seconda riga dopo il fadeIn(). In un'altra nota, se si conosce l'altezza delle immagini, è possibile avvolgere il tag immagine in un div vuoto di quell'altezza che viene sempre visualizzato per impedirne lo scorrimento all'inizio. – Briguy37

Che cosa si vuole fare è evitare che l'azione predefinita dell'evento click . Per fare questo, è necessario modificare lo script come questo:

$(document).ready(function() { 
    $('.galleryicon').live("click", function(e) { 

    $('#mainImage').hide(); 
    $('#cakebox').css('background-image', "url('ajax-loader.gif')"); 
    var i = $('<img />').attr('src',this.href).load(function() { 
     $('#mainImage').attr('src', i.attr('src')); 
     $('#cakebox').css('background-image', 'none'); 
     $('#mainImage').fadeIn(); 
    }); 
    return false; 
    e.preventDefault(); 
    }); 
});

Quindi, si sta aggiungendo una "e", che rappresenta l'evento nella linea $('.galleryicon').live("click", function(e) { e si sta aggiungendo la riga e.preventDefault();

fonte

2012-05-31 15:29:28 redlena

Grazie per la tua risposta, tuttavia, come indicato il codice fa ancora saltare la pagina verso l'alto - mi chiedo se qualcos'altro sta sovrascrivendo la sceneggiatura. il sito demo che utilizza lo stesso codice ha lo stesso effetto. se scorri verso il basso la pagina e poi fai clic sulla miniatura, la pagina torna all'inizio ... grazie però. – marky

ho risolto il problema almeno per il momento. Dopo aver inserito e.preventDefault() ho notato che la pagina si stava spostando automaticamente sul bordo inferiore del div thumbnail. Per evitare il problema ho esteso l'altezza dei div che contengono la miniatura a qualcosa di ridicolo (400 px) e ora la pagina non scorre quando si fa clic su ogni pollice, perché dovrebbe funzionare? – marky

Prova il codice sottostante per evitare che il comportamento predefinito di scorrimento di nuovo alla parte superiore della pagina

$(document).ready(function() { 
    $('.galleryicon').live("click", function(e) { // the (e) represent the event 
    $('#mainImage').hide();  
    $('#cakebox').css('background-image', "url('ajax-loader.gif')");  
    var i = $('<img />').attr('src',this.href).load(function() {   
     $('#mainImage').attr('src', i.attr('src'));   
     $('#cakebox').css('background-image', 'none');   
     $('#mainImage').fadeIn();  
    }); 
    e.preventDefault(); //Prevent default click action which is causing the 
    return false;  //page to scroll back to the top 
    }); 
});

per ulteriori informazioni su event.preventDefault() date un'occhiata here alla documentazione ufficiale.

fonte

2012-05-31 15:29:54

Mille grazie per le tue risposte ho implementato il codice ma salta comunque in cima alla pagina, mi chiedo se un altro script lo sovrascrive. – marky

Ho appena creato una pagina di test e la tua soluzione sembra funzionare fintanto che la barra di scorrimento non si trova nella parte inferiore della pagina (ovvero non puoi scorrere ulteriormente perché non c'è alcun contenuto) – marky

Opps hit return - Tuttavia se la barra di scorrimento è in fondo alla pagina salta di 1 cm. ora ho appena provato ad aggiungere un piè di pagina alto 400px alla pagina una volta che si fa clic su una miniatura la pagina salta di 1 cm ish ma finché non si scorre e si fa clic su un altro pollice la pagina rimane statica. Tuttavia, se si scorre leggermente di nuovo, quindi si preme un pollice, la pagina salta in su o in giù a seconda se si scorre verso l'alto o verso il basso - strano. grazie per il tuo aiuto – marky

Per tutti coloro che è venuto qui da Google e si utilizza un elemento di ancoraggio per generare l'evento, assicurati di annullare il clic allo stesso modo :

<a 
href='javascript:void(0)' 
onclick='javascript:whatever causing the page to scroll to the top' 
></a>

fonte

2012-09-01 06:07:50

Grazie mille, sto cercando di impedire lo scroll su $ ('form'). Submit (function {}); con e.preventDefault(); e se inserisco $ (window) .scrollTop (tempScrollTop); prima del ritorno, o anche se l'avessi restituito, tornava ancora in alto. Questo ha funzionato per me. – KacieHouser

@Akeel penso che usando qualcosa come href = "#" l'azione predefinita venga applicata al browser facendolo scorrere verso l'alto (reindirizzando a http ..../#. Usando ciò che Nasser Al-Wohaibi ha suggerito o qualcosa Ti piace questa -Mettere return false; in fondo alla vostra gestore clic e il href wont essere seguita -Call preventDefault sull'evento nel gestore:. funzione (e) { e.preventDefault(); // il codice di gestione evento si forza il browser a non eseguire l'azione predefinita –

ho avuto un problema simile ricevendo scrollTop al lavoro dopo ricarica dei contenuti div. Il contenuto scorreva verso l'alto ogni volta che veniva eseguita la procedura seguente. Ho trovato che un po 'di ritardo prima di impostare la nuova scrolltop ha risolto il problema.

Questo è tagliato da wdCalendar cui ho modificato questa procedura:

function BuildDaysAndWeekView(startday, l, events, config) 
    .... 
     var scrollpos = $("#dvtec").scrollTop(); 
     gridcontainer.html(html.join("")); 
     setTimeout(function() { 
      $("#dvtec").scrollTop(scrollpos); 
     }, 25); 
    ....

Senza il ritardo, semplicemente non ha funzionato.

fonte

2013-05-12 19:51:05 olekeh

Qualcosa da notare, quando si imposta la posizione di scorrimento, assicurarsi di farlo nella portata corretta. Ad esempio, se si utilizza la posizione di scorrimento in più funzioni, è necessario impostarla al di fuori di queste funzioni.

$(document).ready(function() { 
    var tempScrollTop = $(window).scrollTop(); 
    function example() { 
     console.log(tempScrollTop); 
    }; 

});

fonte

2015-11-26 16:55:40

$('html,body').animate({ 
    scrollTop: $('#answer-<%= @answer.id %>').offset().top - 50 
}, 700);

fonte

2017-11-08 09:23:05

Welcome to Stack Overflow! Sebbene questo snippet di codice possa essere la soluzione, [compresa una spiegazione] (// meta.stackexchange.com/questions/ 114762/spiegheremo g-interamente-code-risposte) aiuta davvero a migliorare la qualità del tuo post. Ricorda che stai rispondendo alla domanda per i lettori in futuro, e queste persone potrebbero non conoscere le ragioni del tuo suggerimento sul codice. – yivi

Come mantenere la posizione di scorrimento della pagina dopo l'esecuzione di un evento jQuery?

risposta

Problemi correlati