locked
Page load and refresh to top of the page html css RRS feed

  • Question

  • User-418973555 posted

    once the page is first run in browser, it appears from the top of the page,

    but when refresh button is pressed on browser, it appears like middle of the page,

    trying to reach the top of page always regardless load/refresh

    Monday, December 16, 2019 7:15 AM

All replies

  • User-1264227148 posted

    Hi larnvok09,
    I think the best thing you can do is use a javascript function.

    You can try putting this code at the end of your page, before the </body>

    <script>
     $(document).ready(function(){
        $(window).scrollTop(0);
    });
    </script>

    When the page is loaded it scrolls up.

    Monday, December 16, 2019 12:52 PM
  • User-418973555 posted

    same as where it first load up, it displays just correct, top of the page,

    but when you press refresh button on the browser, it will be in the middle or lower middle..

    Tuesday, December 17, 2019 1:14 AM
  • User665608656 posted

    Hi larnvok09,

    To force page scroll to the top  regardless load/refresh, I recommend that you can use the window.onbeforeunload event in js to achieve this.

    Because browsers "remember" the last scroll position before unloading, so if you set scroll value to 0,0 just before the unload of your page they will remember of 0,0 and won't scroll back to where the scrollbar was.

    You can refer to this link : https://stackoverflow.com/a/39533616

    Here is the code :

     <script>  
            window.onbeforeunload = function () {
                window.scrollTo(0, 0);
            }; 
     </script>

    Here is the result:

    Best Regards,

    YongQing.

    Tuesday, December 17, 2019 1:35 AM
  • User-418973555 posted

    cannot,

    it still works like before,

    after refresh button is pressed on browser, it still point to middle page.. not top of the page,

    Tuesday, December 17, 2019 2:46 AM
  • User665608656 posted

    Hi larnvok09,

    In this case, I suggest that you provide us with your current code to test and tell us in which browser you are testing.

    Best Regards,

    YongQing.

    Tuesday, December 17, 2019 5:09 AM
  • User-418973555 posted

    okay,

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script>
         window.onbeforeunload = function () {
                window.scrollTo(0, 0);
            }; 
        </script>
        <style>
        .divbgimg { background-image: url('images/Untitled-9.gif'); 
                    background-repeat:no-repeat;
                    background-;
                    
                    height: 100%; 
                    width: 100%; 
                    ;
    
        }
    
        .mainbg
        {
            background-color : black;
            background-repeat:no-repeat;
                    background-;
            margin-left:-8px;   
            margin-top:-8px;
                    height: 100%;
                    width: 100%;
                    ;
        }
    
        #myVideo {
                  ;
                  right: 0;
                  bottom: 0;
                  min-width: 100%; 
                  min-height: 100%;
                  margin-bottom:8%;
                }
    
        .divmaxtagbottomleft 
        {
            
            position : absolute;
            /*margin-top:70%;
            margin-left : 10%;*/
            top:50%;
            left:6%;
            z-index:1;
        }
    
        .divwhatsappmsg
        {
            position :fixed;
            top:90%;
            right: 9%;
            z-index : 1;
        }
    
       
    
        .divmaxtagfont
        {
            ;
            top:8%;
            left:9%;
            z-index : 1;
    
        }
    
        .divmiddlepage
        {
            /*;*/
            padding-top:60%;
            padding-left: 20%;
        }
    
        .divintrofont{
    
            /*;*/
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            font-size: 20pt;
            width: 500px;
            margin-left:50px;
          
            /*padding-top: 60%;
            padding-left: 55%;*/
        }
    
         #mainContent {
            margin: 0 auto;
        }
    
         #mainContent ol li {
          padding-left: 7px;
          margin-bottom: 15px;
          transition: all .2s ease-in-out;
          transform: translate3d(20px, 0, 0);
          opacity: 0;
        }
     
        #mainContent ol li.active {
          transform: translate3d(0px, 0, 0);
          opacity: 1;
        }
    
          #mainContent #firstBox {
         
          transform: translate3d(-30px, 0, 0);
          transition: all 1s ease-out;
         transition-delay: 1s;
          opacity: 0;
        }
     
        #mainContent #firstBox.active {
         
          
          transform: translate3d(0, 0, 0);
          
          opacity: 1;
        }
    
          #mainContent #secondBox {
         
          transform: translate3d(-30px, 0, 0);
          transition: all 1s ease-out;
         transition-delay: 1s;
          opacity: 0;
        }
     
        #mainContent #secondBox.active {
         
          
          transform: translate3d(0, 0, 0);
          
          opacity: 1;
        }
    
          #mainContent #thirdBox {
         
          transform: translate3d(-30px, 0, 0);
          transition: all 1s ease-out;
         transition-delay: 1s;
          opacity: 0;
        }
     
        #mainContent #thirdBox.active {
         
          
          transform: translate3d(0, 0, 0);
          
          opacity: 1;
        }
     
    
        #mainContent #forthBox {
          font-weight: bold;
          
        }
    
        #mainContent #forthBox.active {
       
          animation-name: imagetransition;
          animation-duration:1s;
          
        }
    
           @keyframes imagetransition {
      0%   {width: 0%; }
      2.5%   {width: 1%; }
      5%   {width: 2.5%; }
      7.5%   {width: 3.5%; }
      10%   {width: 5.0%; }
      12.5%   {width: 6.0%; }
      15%   {width: 7.5%; }
      17.5%   {width: 8.5%; }
      20%   {width: 10.0%; }
      22.5%   {width: 11.0%; }
      25%   {width: 12.5%; }
      27.5%   {width: 13.5%; }
      30%   {width: 15.0%; }
      32.5%   {width: 16.0%; }
      35%   {width: 17.5%; }
      37.5%   {width: 18.5%; }
      40%   {width: 20.0%; }
      42.5%   {width: 21.0%; }
      45%   {width: 22.5%; }
      47.5%   {width: 23.5%; }
      50%  {width: 25.0%; }
      52.5%  {width: 26.0%; }
      55%  {width: 27.5%; }
      57.5%  {width: 28.5%; }
      60% {width: 30.0%; }
      62.5% {width: 31.0%; }
      65% {width: 32.5%; }
      67.5% {width: 33.5%; }
      70% {width: 35.0%; }
      72.5% {width: 36.0%; }
      75% {width: 37.5%; }
      77.5% {width: 38.5%; }
      80% {width: 40.0%; }
      82.5% {width: 41.0%; }
      85% {width: 42.5%; }
      87.5% {width: 43.5%; }
      90% {width: 45.0%; }
      92.5% {width: 46.0%; }
      95% {width: 47.5%; }
      97.5% {width: 48.5%; }
      100% {width: 50.0%; }
    }
    
        </style>
        
       
    
    </head>
    <body style="height:2000px;">
        <form id="form1" runat="server">
            <div id="divmain" style="top:0; left:0;">
            <video autoplay muted loop id="myVideo" style="z-index:-1">
                  <source src="images/Transport_video.mp4" type="video/mp4">
                  Your browser does not support HTML5 video.
                </video>
    
            <div class="divmaxtagbottomleft">
                <img src="images/img_maxtag_trans_shadow2.png" width="100%" height="100%" />
              
            </div>
            <div class="divwhatsappmsg">
         
                      <asp:HyperLink ID="hlWhatsapp" runat="server" ImageUrl="~/images/whatsapp_logo2.png" ImageHeight="65" ImageWidth="65" Target="_blank"></asp:HyperLink>
                &nbsp; <asp:HyperLink ID="hlMessenger" runat="server" ImageUrl="~/images/facebook-messenger-logo.png" ImageHeight="60" ImageWidth="80" Target="_blank"></asp:HyperLink>
               
            </div>
           
            <div class="divmaxtagfont">
                <img src="images/maxtagfont.png" />
    
            </div>
            <div id="mainContent">
                    <div class="divmiddlepage" style="display:inline-block;">
                        <img src="images/Untitled-9.gif" id="forthBox" height="400px" width="500px" />
                       
                    </div>
    
                    <div style="display:inline-block;" class="divintrofont"><p id="firstBox">xxxx </p>
                                                        <p id="secondBox">xxxx </p><p id="thirdBox">xxxx</p>&nbsp;&nbsp;&nbsp;
    
                    </div>
                    <div style="clear:both;"></div>
            </div>
                </div>
              <script>
    
                  //var elmnt = document.getElementById("divmain");
                  //  var x = elmnt.scrollLeft;
                  //  var y = elmnt.scrollTop;
    
                  //window.scrollTo(0, 0);
    
                  //$(document).ready(function () {
    
                   
                  //          $("html, body").animate({
                  //              scrollTop: 0
                  //          }, 1200);
                          
                  //      });
                 
              
    
        var isScrolling = false;
     
        window.addEventListener("scroll", throttleScroll, false);
    
                     
    
        function throttleScroll(e) {
          if (isScrolling == false) {
            window.requestAnimationFrame(function() {
              scrolling(e);
              isScrolling = false;
            });
          }
          isScrolling = true;
        }
     
        document.addEventListener("DOMContentLoaded", scrolling, false);
    
        var listItems = document.querySelectorAll("#mainContent ol li");
        var firstBox = document.querySelector("#firstBox");
        var secondBox = document.querySelector("#secondBox");
        var thirdBox = document.querySelector("#thirdBox");
        var forthBox = document.querySelector("#forthBox");
        
        function scrolling(e) {
    
            if (isPartiallyVisible(firstBox)) {
                firstBox.classList.add("active");
    
            }
    
             if (isPartiallyVisible(secondBox)) {
                secondBox.classList.add("active");
    
            }
    
    
             if (isPartiallyVisible(thirdBox)) {
                thirdBox.classList.add("active");
    
            }
    
    
    
      
            if (isPartiallyVisible(forthBox)) {
                forthBox.classList.add("active");
    
            }
    
         
          for (var i = 0; i < listItems.length; i++) {
            var listItem = listItems[i];
     
            if (isPartiallyVisible(listItem)) {
              listItem.classList.add("active");
            } else {
              listItem.classList.remove("active");
            }
          }
        }
     
        function isPartiallyVisible(el) {
          var elementBoundary = el.getBoundingClientRect();
     
          var top = elementBoundary.top;
          var bottom = elementBoundary.bottom;
          var height = elementBoundary.height;
     
          return ((top + height >= 0) && (height + window.innerHeight >= bottom));
        }
     
        function isFullyVisible(el) {
          var elementBoundary = el.getBoundingClientRect();
     
          var top = elementBoundary.top;
          var bottom = elementBoundary.bottom;
     
          return ((top >= 0) && (bottom <= window.innerHeight));
        }
    
    
      </script>
    
        </form>
    </body>
    </html>
    

    Tuesday, December 17, 2019 5:47 AM
  • User665608656 posted

    Hi larnvok09,

    By testing the code you provided, I was able to successfully implement the function of scrolling back to the top of the page after refreshing.

    I suggest you can try clearing your browser's cache and re-running the project for testing.

    If it still does not work, please tell us what browser you are using and its version, and use F12 to see if there are any error reminders.

    Best Regards,

    YongQing.

    Tuesday, December 17, 2019 7:44 AM
  • User-418973555 posted

    using latest chrome,

    after clearing cache, still not able to let the top page appear default after pressing round 'refresh' button

    but when the page loads up from IDE, it is shown top page correctly

    Wednesday, December 18, 2019 1:57 AM
  • User665608656 posted

    Hi larnvok09,

    I updated my Google Chrome to the latest version and reproduced your issue.

    The latest version of Google Chrome has modified these settings.

    Our asp.net forum cannot directly solve the browser issue, so we suggest you ask this question in the Google Chrome forum, here is the link to the forum:

    https://support.google.com/chrome/search?q=refresh%2Bpage%2Bcannot%2Bback%2Bto%2Btop&from_promoted_search=true&count=16

    Best Regards,

    YongQing.

    Wednesday, December 18, 2019 6:40 AM