用append加载数据后会回到顶部

首页课程实战体系课手记专栏慕课教程

用append加载数据后会回到顶部

以下源码。

手机下滑菜单后会触发事件加载数据，但数据一进来，整个页面就回到了顶部，哪位大大知道怎么回事，求教啊！！

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

<link href="~/Content/Styles/css/style.css" rel="stylesheet" />

<link href="~/Content/Styles/css/common.css" rel="stylesheet" />

<script src="~/Content/Scripts/js/zepto.js"></script>

<script src="~/Content/Scripts/js/rem.js"></script>

</head>

<body>

<div class="container white-background">

<header>

<a class="header-icon goback">

<img alt="" src="/Content/Images/images/icon-left.png" />

</a>

<div>

xxx

</div>

<a></a>

</header>

<div>

</div>

<div>

<div>

<img alt="" src="/Content/Images/images/loadding.gif" />

<p>

正在载入...

</p>

</div>

</div>

</div>

</body>

</html>

<script type="text/javascript" src="~/Content/Scripts/Custom/FormHelper.js"></script>

<script type="text/javascript" src="~/Content/Assets/arttemplate/template.js"></script>

<script type="text/javascript" src="~/Content/Scripts/Custom/TempalteInitScript.js"></script>

<script id="listData" type="text/html">

{{each}}

<a class="list-group border-bottom-dotted" href="/news/info?id={{$value.ArticleId}}">

<div>

{{if $value.CoverImg && $value.CoverImg != ""}}

<img alt="小开学车" src="{{$value.CoverImg}}" />

{{else}}

<img alt="小开学车" src="/Content/Images/logo300.png" />

{{/if}}

</div>

<div>

<div>

<div>

{{$value.ArticleTitle}}

</div>

<div>

{{$value.Summary}}

</div>

<div>

{{$value.AddDate | DateFormatMMdd}}

</div>

</div>

</div>

</a>

{{/each}}

</script>

<script type="text/javascript">

var code = "@ViewBag.Code";

// 分页参数

var pagesize = 8;

var currentpage = 1;

// 是否完成

var excuted = true;

// 加载数据

function LoadData() {

excuted = false;

$(".LoadingArea").show();

if (currentpage == 0) {

currentpage = 1;

}

var condition = { Code: code, Columns: "ArticleId,ArticleTitle,Summary,CoverImg,AddDate", CurrentPage: currentpage, PageSize: pagesize, OrderBy: "Seq,!AddDate" }

$.ajax({

type: "GET",

url: "/News/GetList",

data: condition,

dataType: "json",

cache: false,

async: true,

success: function (data) {

if (data.IsSuccess && data.ReturnData != "") {

var resultJson = JSON.parse(data.ReturnData);

if (resultJson && resultJson.length > 0) {

// 装载数据

var listHtml = template('listData', resultJson);

$('.container-scroll-box').append(listHtml);

} else {

currentpage--;

}

} else {

currentpage--;

}

excuted = true;

$(".LoadingArea").hide();

},

error: function (XMLHttpRequest, textStatus, errorThrown) {

currentpage--;

excuted = true;

$(".LoadingArea").hide();

}

});

}

// 初始化

$(function () {

// 加载数据

LoadData();

// 滚动事件

$(".container-scroll-box").unbind().bind("scroll", function () {

// 加载内容

if ($(this).scrollTop() / ($(this)[0].scrollHeight - $(this).height()) >= 0.98) {

// 页面增加

currentpage++;

// 加载数据

LoadData();

}

})

})

</script>

木子七

浏览 1988回答 1

1回答

小白师兄

禁用掉a标签的默认事件试试!类似于这样:$('#btn').click(function(e){ e.preventDefault(); ...});

0 0

随时随地看视频慕课网APP

相关分类

JavaScript
JQuery