如何在加載視圖時轉到視圖結尾處的div？

我有一個主視圖，裏面有一個div，其中另一個視圖加載了jquery。當我用jquery加載div時，結果是正確的，但它使我回到視圖的頂部，我的div下降如何在不移動當前滾動位置的情況下加載div內容？

HTML：

<html><body> 
... 
<div class="col-md-12" id="productList"></div> 
... 
</body></html>

的jQuery：

function loadProduct(){ 
    var op_sort = document.getElementById('op_sort').value; 
    var op_dir = document.getElementById('op_dir').value; 
    $.get("showProductsListSorted", 
     {op_sort: op_sort, op_dir: op_dir}, 
     function(response){ 
      $('#productList').html(response); 
     } 
);

在此先感謝。

來源

2017-01-11 Úrsula

這個問題無關用JSP。那就是你一直提到的html作爲jsp。 –

感謝Longestwayround的回答，這是一個我將用於其他任務的選項。但我真正想要的是我摔跤一旦熊的建議，與使用JavaScript和一個Id，直接把視圖的位置。

的JavaScript：

$("#productList").load("url", 
    {op_sort: op_sort, op_dir: op_dir, op_page: op_page, id_pro: id_pro, id_cat: id_cat}, 
    function() { 
     $('#focusAfterSort').focus(); 
    } 
);

HTML：

<div class="col-md-12" id="focusAfterSort" tabindex="1">

來源

2017-01-31 09:54:55

您加載內容後，進行更改：

... 
$('#productList').html(response); 
$('html, body').animate({ scrollTop: $('#productList').offset().top }, 'fast');

這將滾動窗口到你的元素，但滾動條的位置可能不會確切地點是在裝船前。

UPDATE

甚至更好，嘗試使用負載的功能：

$("#productList").load("showProductsListSorted", 
     {op_sort: op_sort, op_dir: op_dir}, function() { 
    $('html, body').animate({ scrollTop: $('#productList').offset().top }, 'fast'); 
});

SO對$獲得（）VS $ .load（一個很好的討論）位置：AJAX jQuery.load versus jQuery.get

UPDATE 2

要使滾動條精確到位，請使用：

var initialScrollTop=$('html, body').scrollTop(); 
$("#productList").load("showProductsListSorted", 
     {op_sort: op_sort, op_dir: op_dir}, function() { 
    $('html, body').animate({ scrollTop: initialScrollTop }, 'fast'); 
});

來源

2017-01-11 20:25:18 longestwayround

這不會移動焦點，它只是滾動窗口。設置焦點添加：'$（'＃productList'）。focus（）' –

謝謝。修復。我希望我沒有誤解你的問題。 – longestwayround

感謝您的回覆Longestwayround。這是一個解決方案，但即使快速完成，我也不希望看到滾動條。有什麼方法可以保持觀點？ –

如何在加載視圖時轉到視圖結尾處的div？

回答

相關問題