Question

我有一个带有Header-Content-Footer的wwebpage。在内容中我有一个包装器，在这个包装器中，我得到了一个扩展自己的表单。当我扩展表单时，我更改了包装器的最小高度，以便页脚将位于包装器下方。这个和我使用这个jquery代码：

$('#formWrapper').animate({'min-height':totalHeight}, { duration: 400, queue: false });

现在每次点击一个按钮，它都会用动画扩展这个包装器。但是当它变为动画时，我的屏幕将会出现在顶部，我自己也看不到动画。如何将焦点集中在动画发生的屏幕部分？

谢谢

按钮：

<td colspan="3" id="todu2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" id="newItemBoxButton" ><img src="images/addicon.png" /> Voeg een nieuwe regel toe</a></td>

处理程序：

var tdCount =1;
var hiddenCount =1;
$("#newItemBoxButton").click(function(){
            tdCount++;
            hiddenCount++;
            $("#addNewRowAfterThisRow" ).before( "<tr id='itemBox"+tdCount+"'><td valign='top' nowrap='nowrap' class='style1' width='10'>"+tdCount+"</td><td valign='top' ><textarea name='item"+tdCount+"' id='item2"+tdCount+"' rows='4' cols='70' placeholder='Item'></textarea></td><td>&nbsp;</td><td valign='top' class='style3new'><input class='amountBox' type='text' id='amount"+tdCount+"' name='amount"+tdCount+"' value='' placeholder='0' /></td><td  valign='top' class='style3new'> <a href='#' class='deleteItemBoxButton' style='vertical-align:middle' ><img src='images/deleteicon.png'  /></a></td></tr>" );

    //add formheight with 120px < which is the total height of 1 TR
var fieldsetHeight = document.getElementById("fieldset2").offsetHeight;
var totalHeight = fieldsetHeight + 120;
    $('#formWrapper').animate({'min-height':totalHeight}, { duration: 400, queue: false });

    //-----------------------------------------------------------------------------------------------> HIER BEN JE GEBLEVEN DE SCREEN JUMPT STEEDS NAAR  DE TOP: http://stackoverflow.com/questions/32268336/when-adding-new-height-to-wrapper-my-screen-jumps-to-the-top-of-the-page
});

Answer 1

您有几种方法可以解决此问题。

将href="#"替换为href="javascript: void(0);"。 #用于页内导航，后面跟一个ID为#element-id的元素。由于它是空的，它只是引用文档本身，使其跳转到顶部。

或者，您可以在点击处理程序功能的末尾添加return false;，也可以使用jQuery＆＃39; preventDefault();：

$("#newItemBoxButton").click(function(e){
    e.preventDefault(); // default click action is prevented

http://api.jquery.com/event.preventDefault/

Answer 2

正如我所料，按钮就是将您发送到页面顶部的按钮。

href="#"是空书签，位于页面顶部。这相当于在页面顶部放置书签锚并在链接中使用其名称。

您可以使用preventDefault方法轻松停止链接的默认操作：

$("#newItemBoxButton").click(function(e){
  e.preventDefault();
  ...

当为包装器添加新高度时，我的屏幕跳转到页面顶部

2 个答案: