Загрузка AJAX и прокрутка страницы

Question

Мне нужна помощь в решении следующей проблемы. На моей странице есть кнопка, и нажатие кнопки загружает содержимое в элемент «div», расположенный под кнопкой через AJAX. Все работает отлично, но одно. При каждом нажатии кнопки страница прокручивается немного, но я хочу, чтобы она сохранила свою позицию.

Вот мой HTML код:

<input type="button" name="calculate" value="Calculate" 
    onclick="invoke(this.form, this.name, '#result')"/> 

А вот мой код JavaScript (я использую JQuery):

function invoke(form, event, container) { 
    $('input[type="button"]').attr('disabled', 'disabled'); 
    $(container).html('<br/><div class="img"><img src="/Test/img/ajax-loader.gif"/><div>'); 
    $(container).load(form.action, event + '&' + $(form).serialize()); 
} 

Я искал через другие должности, но не нашли никакого рабочего раствора , Мы ценим любые предложения!

Answer 1

Я узнал, откуда возникла проблема. Поскольку содержимое, загруженное в элемент «div», с каждым нажатием кнопки изменило его высоту 2 раза, высота тела страницы также изменилась. Это было причиной прокрутки. Я установил высоту элемента «div» в файле css:

div#result {height: 200px;} 

Это решило проблему.

Answer 2

Хорошо, для ответа, а также хорошо, если вы дадите свой код в jsfiddle. Еще не проблема, недавно я сделал то же самое.

По умолчанию это то же самое положение, если вы нажмете на кнопку, но если у вас есть якорный тэг, то он автоматически пойдет вверх.

Существует так много вещей, чтобы остаться или прокрутить по желаемой позиции.

window.scrollTo(0, 0);

function buttonclick(isfirsttimeload) 
    {   
      if (typeof isfirsttimeload!= "undefined") 
       window.scrollTo(0, 0); 
      else 
      location.hash = '#asearchresult'; //this is hidden anchortag's id, which scrolldown on click. 
    } 

http://www.w3schools.com/jsref/prop_loc_hash.asp

Using window.location.hash in jQuery

Answer 3

Вы должны вызвать эту функцию при загрузке страницы.

limit – The number of records to display per request. 
offset – The starting pointer of the data. 
busy – Check if current request is going on or not. 

The main trick for this scroll down pagination is binding the window scroll event and checking with the data container height 



$(document).ready(function() { 

$(window).scroll(function() { 
      // make sure u give the container id of the data to be loaded in. 
      if ($(window).scrollTop() + $(window).height() > $("#results").height() && !busy) { 
      busy = true; 
      offset = limit + offset; 

      displayRecords(limit, offset); 

      } 
}); 

}) 










<script type="text/javascript"> 
      var limit = 10 
      var offset = 0; 

      function displayRecords(lim, off) { 
      $.ajax({ 
       type: "GET", 
       async: false, 
       url: "getrecords.php", 
       data: "limit=" + lim + "&offset=" + off, 
       cache: false, 
       beforeSend: function() { 
       $("#loader_message").html("").hide(); 
       $('#loader_image').show(); 
       }, 
       success: function(html) { 
       $('#loader_image').hide(); 
       $("#results").append(html); 

       if (html == "") { 
        $("#loader_message").html('<button data-atr="nodata" class="btn btn-default" type="button">No more records.</button>').show() 
       } else { 
        $("#loader_message").html('<button class="btn btn-default" type="button">Load more data</button>').show(); 
       } 

       } 
      }); 
      } 

      $(document).ready(function() { 
      // start to load the first set of data 
      displayRecords(limit, offset); 

      $('#loader_message').click(function() { 

       // if it has no more records no need to fire ajax request 
       var d = $('#loader_message').find("button").attr("data-atr"); 
       if (d != "nodata") { 
       offset = limit + offset; 
       displayRecords(limit, offset); 
       } 
      }); 

      }); 

     </script> 

Реализация с PHP т.е. getrecords.php

<?php 
    require_once("config.php"); 

    $limit = (intval($_GET['limit']) != 0) ? $_GET['limit'] : 10; 
    $offset = (intval($_GET['offset']) != 0) ? $_GET['offset'] : 0; 

    $sql = "SELECT countries_name FROM countries WHERE 1 ORDER BY countries_name ASC LIMIT $limit OFFSET $offset"; 
    try { 
     $stmt = $DB->prepare($sql); 
     $stmt->execute(); 
     $results = $stmt->fetchAll(); 
    } catch (Exception $ex) { 
     echo $ex->getMessage(); 
    } 
    if (count($results) > 0) { 
     foreach ($results as $res) { 
     echo '<h3>' . $res['countries_name'] . '</h3>'; 
     } 
    } 
    ?>