怎么用jquery实现按钮位置随着页面的位置随之改变

Question

如下代码中，页面里有添加和删除按钮，每次点击添加按钮，就会生成一个text框，但点击多次添加按钮之后，生成的几个text把整个页面都占据，这样的话添加和删除按钮就会在最下面，但如果想修改上面生成的text里的内容，然后想继续添加的话，又要用鼠标下拉到窗口的最下面去找添加和删除按钮。所以我想用jquery的方法来实现，添加和删除按钮跟着滚动条的滚动，位置会随之更改，以便用户能在页面的任何位置都能看到添加和删除按钮，貌似有个animate方法，但不会用。html代码
<fieldset>
<legend>New info</legend>
<div><b>调查期间</b>
<input type="text" name="sdate" class="start_date" style="width:100px;" value="" id="dateinput" readonly="readonly"> ~ 
<input type="text" name="edate" class="end_date" style="width:100px;" value="" id="datepicker" readonly="readonly"> 
</div>
<table class="formTable" style="display:none;">
<tbody>
<tr>
<th><input type="checkbox" name="title_idx[]" value="">{=_('标题')}</th>
<td colspan="3" class="length"><input class="smalltitles" type="text" name="" value="" ></td>
</tr>
<tr> 
<th>{=_('内容')}</th>
<td colspan="3">
<input type="radio" id="textarea" name="select[]" value="textarea"> Textarea
<input type="radio" id="radio"   name="select[]" value="radio"> radio button
<input type="radio" id="checkbox" name="select[]" value="checkbox"> checkbox
<br>
<div class="area_child"></div> 
</td>
</tr>
</tbody>
</table>
<br>
</fieldset>
<div class="edit">
<button class="btn" id="add">继续</button>
<button class="btn" id="del">删除</button>
</div>JS 代码$('#add').click(function(){
var area = $('.formTable:hidden');
$('fieldset').append('<table class="formTable">'+$(area).html()+'</table>');
reset_textarea($('.formTable:last'));
reset_radio($('.formTable:last'));
reset_checkbox($('.formTable:last'));
}); $('#del').click(function(){
if($('.formTable tbody tr').find('input[type=checkbox]:checked').length < 1)
{
alert('请选择要删除的标题');return;
}
else
{
$('.formTable tbody tr').find('input[type=checkbox]:checked').parent().next().parent().next().remove();
$('.formTable tbody tr').find('input[type=checkbox]:checked').parent().next().remove();
$('.formTable tbody tr').find('input[type=checkbox]:checked').parent().remove();
}
});

Answer 1

<fieldset>
<legend>New info</legend>
<div><b>调查期间</b>
<input type="text" name="sdate" class="start_date" style="width:100px;" value="" id="dateinput" readonly="readonly"> ~  
<input type="text" name="edate" class="end_date" style="width:100px;" value="" id="datepicker" readonly="readonly">  
</div>
<table class="formTable" style="display:none;">
<tbody>
<tr>
<th><input type="checkbox" name="title_idx[]" value="">{=_('标题')}</th>
<td colspan="3" class="length"><input class="smalltitles" type="text" name="" value="" ></td>
</tr>
<tr> 
<th>{=_('内容')}</th>
<td colspan="3">
<input type="radio" id="textarea" name="select[]" value="textarea"> Textarea
<input type="radio" id="radio" name="select[]" value="radio"> radio button
<input type="radio" id="checkbox" name="select[]" value="checkbox"> checkbox
<br>
<div class="area_child"></div>  
</td>
</tr>
</tbody>
</table>
<br>
</fieldset>
<div class="edit">
<button class="btn" id="add">继续</button>
<button class="btn" id="del">删除</button>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$('#add').click(function(){
var area = $('.formTable:hidden');
$('fieldset').append('<table class="formTable">'+$(area).html()+'</table>');
$('body').animate({
scrollTop:$('body').height()
})
reset_textarea($('.formTable:last'));
reset_radio($('.formTable:last'));
reset_checkbox($('.formTable:last')); 
});$('#del').click(function(){
if($('.formTable tbody tr').find('input[type=checkbox]:checked').length < 1)
{
alert('请选择要删除的标题');return;
}
else
{
$('.formTable tbody tr').find('input[type=checkbox]:checked').parent().next().parent().next().remove();
$('.formTable tbody tr').find('input[type=checkbox]:checked').parent().next().remove();
$('.formTable tbody tr').find('input[type=checkbox]:checked').parent().remove();
}
});
</script>楼主 这个意思？

Answer 2

window.scrollTo(0,$(document.body)[0].scrollHeight - $(window).height());

Answer 3

我的意思是继续（添加）和删除按钮一直都显示在页面上，如果加了很多text等内容的话，这两个按钮就会在最下面，当内容填满页面的时候，这两个按钮在下面已经不能看到了，只有用户拉动滚动条往下拉才能看到。我想要的是不管加了多少内容，在页面里都要看到这两个按钮

Answer 4

html代码里没有body的，代码如下<form id="surveyinfo" name="surveyinfo" method="post" action="" enctype="multipart/form-data"  onsubmit="return false;" >
<span class="bigtitle">Big Title<input id="bigname" type = "text" name="big_name" value=""></span>
<div id="use_flag">
<input type="checkbox" name="use_flag" id="use_flag" value="T" checked>使用与否
</div>
<fieldset>
<legend>New info</legend>
<div><b>调查期间</b>
<input type="text" name="sdate" class="start_date" style="width:100px;" value="" id="dateinput" readonly="readonly"> ~ 
<input type="text" name="edate" class="end_date" style="width:100px;" value="" id="datepicker" readonly="readonly"> 
</div>
<table class="formTable" style="display:none;">
<tbody>
<tr>
<th><input type="checkbox" name="title_idx[]" value="">{=_('标题')}</th>
<td colspan="3" class="length"><input class="smalltitles" type="text" name="" value="" ></td>
</tr>
<tr> 
<th>{=_('内容')}</th>
<td colspan="3">
<input type="radio" id="textarea" name="select[]" value="textarea"> Textarea
<input type="radio" id="radio"   name="select[]" value="radio"> radio button
<input type="radio" id="checkbox" name="select[]" value="checkbox"> checkbox
<br>
<div class="area_child"></div> 
</td>
</tr>
</tbody>
</table>
<br>
</fieldset>
<div class="edit">
<button class="btn" id="add">继续</button>
<button class="btn" id="del">删除</button>
</div>
</form>

Answer 5

就是怎么让如下代码一直显示在页面中，因为这段代码随着内容的添加，内容填满页面后，会显示在最底部，导致用户看不见这两个按钮。 <div class="edit">
<button class="btn" id="add">继续</button>
<button class="btn" id="del">删除</button>
</div>