पेज रीफ्रेश करें और स्क्रॉल स्थिति रखें

क्या कोई मुझे दिखा सकता है कि मैं क्या गलत कर रहा हूं? मुझे अपने पृष्ठ को एक निश्चित अवधि के बाद रीफ्रेश करने की आवश्यकता है, लेकिन यह पृष्ठ के शीर्ष पर रीफ्रेश हो जाता है, मुझे पृष्ठ स्थान को बदलने के लिए इसकी आवश्यकता नहीं है! तो यही वह है जो अब मैं काम नहीं कर रहा हूं यह मेटा टैग है? यहां वह है जो मैंने अभी भी रीफ्रेश नहीं किया है, कुछ गलत करना चाहिए?पेज रीफ्रेश करें और स्क्रॉल स्थिति रखें

यहाँ प्रारंभिक जवाब मैं इस के लिए यह बदल दिया है में से कुछ को पढ़ने के बाद क्या मैं मूल रूप से था ...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
     <meta http-equiv="refresh" content="72"> 
     <meta http-equiv="Pragma" CONTENT="no-cache"> 
     <meta http-equiv="Expires" CONTENT="-1"> 

     <style type="text/css"> 
     body 
     { 
      background-image: url('../Images/Black-BackGround.gif'); 
      background-repeat: repeat; 
     } 
     </style> 
    </head> 

    <script type="text/javascript"> 

    function saveScrollPositions(theForm) { 
     if(theForm) { 
      var scrolly = typeof window.pageYOffset != 'undefined' ? window.pageYOffset 
                : document.documentElement.scrollTop; 
      var scrollx = typeof window.pageXOffset != 'undefined' ? window.pageXOffset 
                : document.documentElement.scrollLeft; 
      theForm.scrollx.value = scrollx; 
      theForm.scrolly.value = scrolly; 
     } 
    } 
    </script> 

<form action="enroll.php" name="enrollment" method="post" onsubmit="return saveScrollPositions (this);"> 
    <input type="hidden" name="scrollx" id="scrollx" value="0" /> 
    <input type="hidden" name="scrolly" id="scrolly" value="0" /> 

    <STYLE type="text/css"> 
    #Nav a{ position:relative; display:block; text-decoration: none; color:Black; } 
    Body td{font-Family: Arial; font-size: 12px; } 
    </style>

है ...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 

<style type="text/css"> 
body 
{ 
    background-image: url('../Images/Black-BackGround.gif'); 
    background-repeat: repeat; 
} 
</style> 
</head> 


<script> 
function refreshPage() { 
    var page_y = $(document).scrollTop(); 
    window.location.href = window.location.href + '?page_y=' + page_y; 
} 
window.onload = function() { 
    setTimeout(refreshPage, 35000); 
    if (window.location.href.indexOf('page_y') != -1) { 
     var match = window.location.href.split('?')[1].split("&")[0].split("="); 
     $('html, body').scrollTop(match[1]); 
    } 
} 
</script> 

<STYLE type="text/css"> 
#Nav a{ position:relative; display:block; text-decoration: none; color:black; } 
Body td{font-Family: Arial; font-size: 12px; } 
</style>

स्रोत

2013-07-14 chriswiec

स्थानीय स्टोरेज का उपयोग करके सहेजने का प्रयास करें। – Shawn31313

मैं कैसे कर सकता हूं जो आप मुझे मेरे साथ दिखा सकते हैं? – chriswiec

इस के साथ अपने HTML के ALL बदलें:

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
      body { 
       background-image: url('../Images/Black-BackGround.gif'); 
       background-repeat: repeat; 
      } 
      body td { 
       font-Family: Arial; 
       font-size: 12px; 
      } 
      #Nav a { 
       position:relative; 
       display:block; 
       text-decoration: none; 
       color:black; 
      } 
     </style> 
     <script type="text/javascript"> 
      function refreshPage() { 
       var page_y = document.getElementsByTagName("body")[0].scrollTop; 
       window.location.href = window.location.href.split('?')[0] + '?page_y=' + page_y; 
      } 
      window.onload = function() { 
       setTimeout(refreshPage, 35000); 
       if (window.location.href.indexOf('page_y') != -1) { 
        var match = window.location.href.split('?')[1].split("&")[0].split("="); 
        document.getElementsByTagName("body")[0].scrollTop = match[1]; 
       } 
      } 
     </script> 
    </head> 
    <body><!-- BODY CONTENT HERE --></body> 
</html>

स्रोत

2013-07-15 03:04:11 Shawn31313

फ़ायरफ़ॉक्स पर काम नहीं किया गया था (scrollTop हमेशा शून्य है) तो मैंने [यह] (http://mrcoles.com/blog/scroll-sneak-maintain-position-between-page-loads/) –

मैं इसे आईई 11 में काम करने के लिए नहीं मिला। मैंने इनमें से एक गुच्छा जोड़ा शरीर: 'sadsad
' लेकिन जब मैंने लिंक पर क्लिक किया तो मुझे पृष्ठ के शीर्ष पर मिला। –

सही उत्तर –

आप नहीं चाहते हैं स्थानीय भंडारण का उपयोग करने के लिए आप पेज की वाई स्थिति को यूआरएल से जोड़ सकते हैं और लोड पर जेएस के साथ इसे पकड़ सकते हैं और पेज ऑफसेट को आपके द्वारा पारित प्राप्त पर्म पर सेट कर सकते हैं, यानी:

//code to refresh the page 
var page_y = $(document).scrollTop(); 
window.location.href = window.location.href + '?page_y=' + page_y; 


//code to handle setting page offset on load 
$(function() { 
    if (window.location.href.indexOf('page_y') != -1) { 
     //gets the number from end of url 
     var match = window.location.href.split('?')[1].match(/\d+$/); 
     var page_y = match[0]; 

     //sets the page offset 
     $('html, body').scrollTop(page_y); 
    } 
});

स्रोत

2013-07-14 20:16:20 kkemple

मैं इसे कहां रखूं? – chriswiec

+1 @ chrisw.iec बस इसे स्क्रिप्ट टैग में डाल दें ... आप इसे कहां रखेंगे? – Shawn31313

तो मेटा टैग रखें और फ़ंक्शन को स्क्रॉल स्थिति को स्कैंड टैग के बीच में सहेजें? – chriswiec

document.location.reload() भंडार स्थिति है, लेकिन यह in the docs उल्लेख नहीं है।

अतिरिक्त लोड करने के लिए अतिरिक्त true पैरामीटर जोड़ें।

document.location.reload(true)

स्रोत

2016-03-02 14:47:15 powtac

यह अब एमडीएन पर उल्लिखित है। – trysis

@ ट्रीसिस कहां? इसे https: // पर नहीं देख सकता developer.mozilla.org/en-US/docs/Web/API/Location/reload$compare?locale=en-US&to=788646&from=471047 – powtac

यह आपके उत्तर में लिंक किए गए पृष्ठ पर है। वे इसे 'मजबूर रीलोड' कहते हैं। – trysis

यह रीफ्रेशिंग के लिए भी उपयोगी हो सकता है। लेकिन यदि आप एक ही स्थिति पर क्लिक करने से पहले पृष्ठ पर स्थिति का ट्रैक रखना चाहते हैं .. निम्नलिखित कोड मदद करेगा।

इसके अलावा उपयोगकर्ता को संकेत करता है, तो वे वास्तव में है कि क्या करना चाहते हैं के लिए एक डाटा-पुष्टि जोड़ा ..

नोट: मैं jQuery और js-cookie.js उपयोग कर रहा हूँ कुकी जानकारी स्टोर करने के लिए।

$(document).ready(function() { 
    // make all links with data-confirm prompt the user first. 
    $('[data-confirm]').on("click", function (e) { 
     e.preventDefault(); 
     var msg = $(this).data("confirm"); 
     if(confirm(msg)==true) { 
      var url = this.href; 
      if(url.length>0) window.location = url; 
      return true; 
     } 
     return false; 
    }); 

    // on certain links save the scroll postion. 
    $('.saveScrollPostion').on("click", function (e) { 
     e.preventDefault(); 
     var currentYOffset = window.pageYOffset; // save current page postion. 
     Cookies.set('jumpToScrollPostion', currentYOffset); 
     if(!$(this).attr("data-confirm")) { // if there is no data-confirm on this link then trigger the click. else we have issues. 
      var url = this.href; 
      window.location = url; 
      //$(this).trigger('click'); // continue with click event. 
     } 
    }); 

    // check if we should jump to postion. 
    if(Cookies.get('jumpToScrollPostion') !== "undefined") { 
     var jumpTo = Cookies.get('jumpToScrollPostion'); 
     window.scrollTo(0, jumpTo); 
     Cookies.remove('jumpToScrollPostion'); // and delete cookie so we don't jump again. 
    } 
});

इस तरह इसका उपयोग करने का एक उदाहरण।

<a href='gotopage.html' class='saveScrollPostion' data-confirm='Are you sure?'>Goto what the heck</a>

स्रोत

2016-11-18 20:29:34

यह बस बहुत बढ़िया है .. !! कूल काम करता है। धन्यवाद। –

पेज रीफ्रेश करें और स्क्रॉल स्थिति रखें

उत्तर

संबंधित मुद्दे