Jquery页面在复选框更改function上移回到顶部

当您单击此处第二个“客户端”标题下的任何按钮时，页面将向上移动到顶部： http ： //kodiakgroup.com/clients.php

我已经尝试过preventDefault函数，并在下面的更改函数中return false建议。 看看我能做些什么来防止这种行为？

第一部分改变了：

 //Toggle select all/deselect function $('#vertical-filters input').change(function (e) { $('.selectAllBoxes').prop('checked', false); getCustomers(); e.preventDefault(); return false; }); $('.selectAllBoxes').change(function (e) { $('#vertical-filters input').prop('checked', false); getCustomers(); e.preventDefault(); return false; }); 

所有的javascript：

 $(function () { $('.selectAllBoxes').prop('checked', true);//Set checkboxes as checked by default getCustomers(); //Initially call all customers function getCustomers() { $('ul#customers').html('');//empty list var definedCategoryArray=new Array(); var categoriesPlural= new Array(); var customerSplit=new Array(); for(var x=0; x< $('#vertical-filters input').length; x++){ var thisItem=$('#vertical-filters input')[x]; var thisItemName=$(thisItem).attr('id'); if($('.selectAllBoxes').is(':checked')){ definedCategoryArray[thisItemName]=true; } else{ if ($(thisItem).is(':checked')) definedCategoryArray[thisItemName]=true; else definedCategoryArray[thisItemName]=false; } } $.getJSON('customers.json', function(data) { for(var index in definedCategoryArray){ //cycle through categories array for(var i=0; i<data.customers.length; i++){ //cycle through json data if (definedCategoryArray[index]==true){//if the value in the array is true (item checked) //console.log(data.customers[i].customerName+ ' : ' + data.customers[i].category); if(data.customers[i].category.indexOf(',') != -1) //if there is more than one category, detect the comma seperating them categoriesPlural = data.customers[i].category.split(','); else //there is only one category categoriesPlural[0]=data.customers[i].category; for (var y = 0; y<categoriesPlural.length; y++){ //console.log(categoriesPlural[y]); if(categoriesPlural[y] == index){ //match category (from definedCategoryArray index) to items in json object to parse $('ul#customers').append('
'); checkDuplicates(data.customers[i].customerName.replace(/\s+/g, '-')); } } } } } }).fail(function() { console.log( "error" ); }); } function checkDuplicates(customerName){ for(var x=0; x< $('#customers li').length; x++){//loop through clients already on the page to prevent duplicates var thisClient=$('#customers li')[x]; var thisClientName=$(thisClient).attr('id'); if(thisClientName == customerName){ var superClient1=$('.'+customerName)[1]; var superClient2=$('.'+customerName)[2]; if (superClient1) $(superClient1).css('display','none'); if(superClient2) $(superClient2).css('display','none'); //console.log(customerName + '=' + thisClientName + ' emptied'); } } } //Toggle select all/deselect function $('#vertical-filters input').change(function (e) { $('.selectAllBoxes').prop('checked', false); getCustomers(); e.preventDefault(); return false; }); $('.selectAllBoxes').change(function (e) { $('#vertical-filters input').prop('checked', false); getCustomers(); e.preventDefault(); return false; }); }); 

Answer 1

它实际上并没有回到顶部，但你正在删除项目。 页面正在缩小并滚动显示然后您添加项目并且页面展开而不向后滚动。

一个简单的黑客操作是在删除项目之前修复ul高度，然后删除属性样式。 像那样 ：

 $('#vertical-filters input').change(function (e) { $('.selectAllBoxes').prop('checked', false); $('ul#customers').height($('ul#customers').height()); //fix the height getCustomers(); $('ul#customers').removeAttr('style'); //Reset the height }); 

对所有.change()函数重复此.change() 。

它没有经过测试，但在理论上它应该可行

Answer 2

那是因为您要从ul#customers容器中删除内容，请在HTML中检查此行

 function getCustomers() { $('ul#customers').html('');//empty list ... } 

有一些解决方法可以避免此滚动，您可以查看此post

Answer 3

正如另一个答案所示，尝试在ul上设置高度。 这将是我的方法：

 function getCustomers() { var $customers = $('ul#customers'); $customers.css('height', $customers.height()); $customers.html(''); //empty list // the rest of your getCustomers() function // at the very end, remove the height $customers.css('height', ''); } 

因此，您首先要在ul上明确设置高度。 这将使其免于崩溃。 然后，您可以清空它并添加新内容。 在最后，你删除高度， ul将崩溃到其内容所需的任何高度。

这可能仍然有点震耳欲聋。 您可以考虑使用jQuery $ .animate（）或CSS3动画设置动画高度

Answer 4

多谢你们！ 两者都是很好的答案，所以我不确定要标记哪一个。 我实际上只是在容器上设置了一个最小高度并修复了它！ 🙂