Отключение прокрутки по POST

Question

У меня есть страница, которая использует POST для извлечения данных из mySQL. Тем не менее, это раздражает, потому что, если я прокручу вниз и нажимаю на то, что делает POST, он полностью ударяет страницу вверх. Кто-нибудь знает какой-нибудь javascript/jquery плагин, который может это исправить?

Answer 1

Вы попробовали Jumping Inside Pages?

и другой пример How To Link to a Specific Spot on a Page

<div id="whatever-you-want-to-call-it"> 
    The content of your div here. 
</div> 

и URL, чтобы добраться до этой точки

http://www.pagename.html#whatever-you-want-to-call-it 

Answer 2

Ну, если вы делаете AJAX POST и заменить содержимое страницы с той, которая является результатом AJAX POST, этот эффект прокрутки не будет проблемой.

Имейте в виду, что эта операция может показаться бесшовной для пользователя (без загрузки браузера).

Допустим, у вас есть форма:

<form id="some_form" action="myphp.php"> 
    <input name="something" value="foo"/> 
    <input name="something_else" value="bar" /> 
</form> 

и JQuery:

$("#some_form").submit(function() { 
    var url = $(this).attr("action"); 
    var form_data = $(this).serialize(); 
    // post the same data via an AJAX call 
    $.post(url, form_data, function(data) { 
     // replace the contents from the received response 
     $("html").html(data); 
    }); 
    // disable the default form submit behavior 
    return false; 
}); 

Answer 3

Это более ясно использовать e.preventDefault(); с jQuery (как предложил Уку Лоскит). Существует также ошибка в его коде (это не сработает), поэтому я исправил его.

Вот его код с изменением:

<form id="some_form" action="myphp.php""> 
    <input name="something" value="foo"/> 
    <input name="something_else" value="bar" /> 
</form> 

и JQuery:

$("#some_form").submit(function(e) { // e = event object, it has many usefull properties and methods 
    e.preventDefault(); 
    var url = $(this).attr("action"); 
    var form_data = $(this).serialize(); 
    // post the same data via an AJAX call 
    $.post(url, form_data, function(data) { 
     // replace the contents from the received response 
     $(document).html(data); 
    }); 
}); 

Кстати, нет никакого способа, как добиться того, что без JavaScript, если вы хотите, чтобы остаться на та же страница (не перезагружайте, не меняйте URL-адрес). Если он используется как разбиение на страницы, вы можете добавить # some-id после URL-адреса, а затем добавить id-some-id в элемент, который должен быть наверху при загрузке страницы. Это будет хорошо работать - не нужно.

Answer 4

scrollTop Попробуйте использовать:

$("#some_form").submit(function() { 
    var url = $(this).attr("action"); 
    var form_data = $(this).serialize(); 
    var currentScrollTop = $('body').scrollTop(); 

    // post the data via an AJAX call 
    $.post(url, form_data, function(data) { 
     // replace the contents from the received response 
     $(document).html(data); 
     $('body').scrollTop(currentScrollTop); 
    }); 

    // disable the default form submit behavior 
    return false; 
});