一个加载更多的消息列表，点击任意一条进去，返回还在原来的地方，页面不刷新
0
悬赏园豆：30
[已解决问题]
解决于 2017-05-14 12:25
http://m.hyjianmei.com/products_detail/&productId=17.html 类似这个网址的效果，不停的点击加载更多，返回时还在原来点击进入的地方，sessionStorage或localStorage，详细代码
最佳答案
0
你是不是在进入页面的时候就默认新加载了所有的数据？ 如果你要实现你说的那种效果的话，返回的时候不要刷新数据就不会回到第一页了。还有你那个页数也不能每次进入页面就初始化，不然数据会乱。我是开发移动端的，所以你说的代码不会写，只能告诉你思路了。
收获园豆：30
其他回答(2)
0
用本地存储记录一下进入之前该页面的相关状态，比如页次，滚到什么地方，等回来的时候根据这些数据还原现场。
道理我知道，我不会写代码，特来求助
@忆时笙安: 木有代码，有思路啥都好办，代码哪里不懂搜哪里，比如不知道怎么用js滚动到相应的位置，查一下就好了。
0
类似今日头条，根据滑动窗口的高度获取数据
<content id="pageletListContent" class="feed-list-container">
<div class="list_content" id="divListContent">
<section class="middle_mode has_action">
<a href="http://mp.weixin.qq.com/s?__biz=MjM5MDI5OTkyOA==&mid=2665524017&idx=1&sn=cf905ddd3cda53cac1eab3200d89912c&chksm=bd52e9468a2560504536d6ca10f88ebed8230c7fcfe77c1ba8935910d162c34ffd91674bcf79#rd" class="article_link clearfix">
<div class="desc">
<h3 class="dotdot line3 image-margin-right">为了在上海的3.8万人，这个奥运冠军帮他们做了一件事</h3>
<div class="item_info">
<span class="src space">一条</span>
<span class="cmt space">评论 325</span>
<span class="dislike-news mid-space fr"></span>
</div>
</div>
<div class="list_img_holder">
<img src="./头条_files/28558-239e811d98d117f6294423e575e44274">
</div>
</a>
<div class="one-px-border"></div>
</section>
<section class="middle_mode has_action">
<a href="http://mp.weixin.qq.com/s?__biz=MjM5MDI5OTkyOA==&mid=2665524017&idx=2&sn=36c49da24a9fc753e125be510ca63fc5&chksm=bd52e9468a2560500f32522181f38d488298b2c47eb07e05770ac4e52c9866554226b690d6ec#rd" class="article_link clearfix">
<div class="desc">
<h3 class="dotdot line3 image-margin-right">爱她，就让她每一寸肌肤享受这种触感</h3>
<div class="item_info">
<span class="src space">一条</span>
<span class="cmt space">评论 42</span>
<span class="dislike-news mid-space fr"></span>
</div>
</div>
<div class="list_img_holder">
<img src="./头条_files/28558-6724bc70a04829d97641af9cb26a81ef">
</div>
</a>
<div class="one-px-border"></div>
</section>
<section class="middle_mode has_action">
<a href="http://mp.weixin.qq.com/s?__biz=MjM5MDI5OTkyOA==&mid=2665524017&idx=3&sn=2ba6bc6d1f866d92123b78a1ff8ab3ae&chksm=bd52e9468a2560501b8bf6d3aeba8e7bf4642d3243fc1fb889dd2648fbc3b000221fc44a808d#rd" class="article_link clearfix">
<div class="desc">
<h3 class="dotdot line3 image-margin-right">超轻、好走又好看的健步鞋，真是国货良心</h3>
<div class="item_info">
<span class="src space">一条</span>
<span class="cmt space">评论 36</span>
<span class="dislike-news mid-space fr"></span>
</div>
</div>
<div class="list_img_holder">
<img src="./头条_files/28558-9c32f257dbb4d27fb10aa03fa653f915">
</div>
</a>
<div class="one-px-border"></div>
</section>
<section class="middle_mode has_action">
<a href="http://mp.weixin.qq.com/s?__biz=MjM5MDI5OTkyOA==&mid=2665524017&idx=4&sn=073260a685c1f724be4f843989a4c4cc&chksm=bd52e9468a256050c97549bd175f74d85483858b6228d7204677a82ce3ca51ac72e21c137f44#rd" class="article_link clearfix">
<div class="desc">
<h3 class="dotdot line3 image-margin-right">用了它，才知道这些年的牙都白刷了</h3>
<div class="item_info">
<span class="src space">一条</span>
<span class="cmt space">评论 35</span>
<span class="dislike-news mid-space fr"></span>
</div>
</div>
<div class="list_img_holder">
<img src="./头条_files/28558-5a4a22a6a2915df96e90b9913e8e6a52">
</div>
</a>
<div class="one-px-border"></div>
</section>
<section class="middle_mode has_action">
<a href="http://mp.weixin.qq.com/s?__biz=MjM5MDI5OTkyOA==&mid=2665524017&idx=5&sn=570d001fed931dfe5d9fdac9d2c67530&chksm=bd52e9468a256050abf9a0335f271c2338dc43168f705ed2d1acf48133b2e27a870ad8f5fd53#rd" class="article_link clearfix">
<div class="desc">
<h3 class="dotdot line3 image-margin-right">哈佛大学出版社的镇社之宝，竟是一套中国史！</h3>
<div class="item_info">
<span class="src space">一条</span>
<span class="cmt space">评论 35</span>
<span class="dislike-news mid-space fr"></span>
</div>
</div>
<div class="list_img_holder">
<img src="./头条_files/28558-13d152b90d8d46cc02e9d5a602160052">
</div>
</a>
<div class="one-px-border"></div>
</section>
<section class="middle_mode has_action">
<a href="http://mp.weixin.qq.com/s?__biz=MjM5MDI5OTkyOA==&mid=2665524017&idx=6&sn=f69f8bebc0cf08c7ba608ad7645d3591&chksm=bd52e9468a2560505f87d25830729433728ae873c0d002db56fca34386a56abd2fa344417b66#rd" class="article_link clearfix">
<div class="desc">
<h3 class="dotdot line3 image-margin-right">晚清国画大师画的竹子，让他们给做成了一双筷子……</h3>
<div class="item_info">
<span class="src space">一条</span>
<span class="cmt space">评论 45</span>
<span class="dislike-news mid-space fr"></span>
</div>
</div>
<div class="list_img_holder">
<img src="./头条_files/28558-9d466fc648d9f9fa5788f76383bdb869">
</div>
</a>
<div class="one-px-border"></div>
</section>
<section class="middle_mode has_action">
<a href="http://mp.weixin.qq.com/s?__biz=MjM5MDI5OTkyOA==&mid=2665524017&idx=7&sn=8002f31f1e7dbbe672006b3afefc9161&chksm=bd52e9468a256050b774538ab9842004474dee0f579150a45d1d4cdb60dde2dfd8087ab18da8#rd" class="article_link clearfix">
<div class="desc">
<h3 class="dotdot line3 image-margin-right">限量仅200盒的鲜桂花普洱，手慢无！</h3>
<div class="item_info">
<span class="src space">一条</span>
<span class="cmt space">评论 17</span>
<span class="dislike-news mid-space fr"></span>
</div>
</div>
<div class="list_img_holder">
<img src="./头条_files/28558-fe0c73ee2c626bd628fd92300c643ee9">
</div>
</a>
<div class="one-px-border"></div>
</section>
<section class="middle_mode has_action">
<a href="http://mp.weixin.qq.com/s?__biz=MjM5ODIyMTE0MA==&mid=2650968810&idx=1&sn=2e315bedca47143dc35d79e0ed11bc50&chksm=bd3836d18a4fbfc798bc09722319963e4caaf53a69c5ab6341354ad5da7c8f23a9df38a06c73#rd" class="article_link clearfix">
<div class="desc">
<h3 class="dotdot line3 image-margin-right">48 小时开发一个有商业价值的小应用可好?</h3>
<div class="item_info">
<span class="src space">小道消息</span>
<span class="cmt space">评论 154</span>
<span class="dislike-news mid-space fr"></span>
</div>
</div>
<div class="list_img_holder">
<img src="./头条_files/28558-864f5af57d17ed737af8c7bd4f1b733e">
</div>
</a>
<div class="one-px-border"></div>
</section>
<section class="middle_mode has_action">
<a href="http://mp.weixin.qq.com/s?__biz=MjAzNzMzNTkyMQ==&mid=2653753248&idx=1&sn=d1a5b1faf70dc5deaa3e85ed5c246d56&chksm=4a891fbe7dfe96a8b17bb47688b1c040aee6c7019392de030ad6c98d9c5e6676e0864a82b4ce#rd" class="article_link clearfix">
<div class="desc">
<h3 class="dotdot line3 image-margin-right">8点1氪：苹果第四财季业绩下滑；vivo和OPPO超越华为成为中国前两大手机厂商；Google Pixel手机预售大幅超过预期</h3>
<div class="item_info">
<span class="src space">36氪</span>
<span class="cmt space">评论 36</span>
<span class="dislike-news mid-space fr"></span>
</div>
</div>
<div class="list_img_holder">
<img src="./头条_files/28558-4be398d354b0ebbc8472b7d02161b06e">
</div>
</a>
<div class="one-px-border"></div>
</section>
<section class="middle_mode has_action">
<a href="http://mp.weixin.qq.com/s?__biz=MjAzNzMzNTkyMQ==&mid=2653753248&idx=2&sn=0e68a8a222ef2e79d3f8a44635b92d61&chksm=4a891fbe7dfe96a8bec7f2d048de368d89d6af4ebe743c08039cdd1f498b204664d4d8890f3a#rd" class="article_link clearfix">
<div class="desc">
<h3 class="dotdot line3 image-margin-right">在锤子内部孵化两年，VR项目团队或要解散了</h3>
<div class="item_info">
<span class="src space">36氪</span>
<span class="cmt space">评论 10</span>
<span class="dislike-news mid-space fr"></span>
</div>
</div>
<div class="list_img_holder">
<img src="./头条_files/28558-8eef49058196dc4e05d337db0f00db34">
</div>
</a>
<div class="one-px-border"></div>
</section>
</div>
<div id="divMore" class="list_bottom" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1); display: none;">
<section class="loadmoretip"><a href="" old-text="">加载中...</a></section>
</div>
</content>
<script type="text/javascript">
$('#divMore').hide()
var page=2;
var hack=0;
function showAjax(){
$.ajax({
type: "get",
url: "/listmore.php?page="+page,
async: false,
success: function(data){
//alert(data);
hack++;
//alert(hack)
$('#divListContent').append(data);
page++;
}
});
$('#divMore').hide()
}
function scrollFn(){
//真实内容的高度
var pageHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight);
//视窗的高度
var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
//隐藏的高度
var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
if(pageHeight - viewportHeight - scrollHeight < 20){
//alert($('#divMore')[0].style.display == "none")
if($('#divMore')[0].style.display == "none"){
$('#divMore').show()
showAjax(page);
}
}
}
$(window).scroll(scrollFn);
<content id="pageletListContent" class="feed-list-container"><div class="list_content" id="divListContent"><section class="middle_mode has_action"><a href="http://mp.weixin.qq.com/s?__biz=MjM5MDI5OTkyOA==&mid=2665524017&idx=1&sn=cf905ddd3cda53cac1eab3200d89912c&chksm=bd52e9468a2560504536d6ca10f88ebed8230c7fcfe77c1ba8935910d162c34ffd91674bcf79#rd" class="article_link clearfix"><div class="desc"><h3 class="dotdot line3 image-margin-right">为了在上海的3.8万人，这个奥运冠军帮他们做了一件事</h3> <div class="item_info"><span class="src space">一条</span><span class="cmt space">评论 325</span><span class="dislike-news mid-space fr"></span></div> </div><div class="list_img_holder"><img src="./头条_files/28558-239e811d98d117f6294423e575e44274"> </div> </a> <div class="one-px-border"></div></section>
<section class="middle_mode has_action"><a href="http://mp.weixin.qq.com/s?__biz=MjM5MDI5OTkyOA==&mid=2665524017&idx=2&sn=36c49da24a9fc753e125be510ca63fc5&chksm=bd52e9468a2560500f32522181f38d488298b2c47eb07e05770ac4e52c9866554226b690d6ec#rd" class="article_link clearfix"><div class="desc"><h3 class="dotdot line3 image-margin-right">爱她，就让她每一寸肌肤享受这种触感</h3> <div class="item_info"><span class="src space">一条</span><span class="cmt space">评论 42</span><span class="dislike-news mid-space fr"></span></div> </div><div class="list_img_holder"><img src="./头条_files/28558-6724bc70a04829d97641af9cb26a81ef"> </div> </a> <div class="one-px-border"></div></section>
<section class="middle_mode has_action"><a href="http://mp.weixin.qq.com/s?__biz=MjM5MDI5OTkyOA==&mid=2665524017&idx=3&sn=2ba6bc6d1f866d92123b78a1ff8ab3ae&chksm=bd52e9468a2560501b8bf6d3aeba8e7bf4642d3243fc1fb889dd2648fbc3b000221fc44a808d#rd" class="article_link clearfix"><div class="desc"><h3 class="dotdot line3 image-margin-right">超轻、好走又好看的健步鞋，真是国货良心</h3> <div class="item_info"><span class="src space">一条</span><span class="cmt space">评论 36</span><span class="dislike-news mid-space fr"></span></div> </div><div class="list_img_holder"><img src="./头条_files/28558-9c32f257dbb4d27fb10aa03fa653f915"> </div> </a> <div class="one-px-border"></div></section>
<section class="middle_mode has_action"><a href="http://mp.weixin.qq.com/s?__biz=MjM5MDI5OTkyOA==&mid=2665524017&idx=4&sn=073260a685c1f724be4f843989a4c4cc&chksm=bd52e9468a256050c97549bd175f74d85483858b6228d7204677a82ce3ca51ac72e21c137f44#rd" class="article_link clearfix"><div class="desc"><h3 class="dotdot line3 image-margin-right">用了它，才知道这些年的牙都白刷了</h3> <div class="item_info"><span class="src space">一条</span><span class="cmt space">评论 35</span><span class="dislike-news mid-space fr"></span></div> </div><div class="list_img_holder"><img src="./头条_files/28558-5a4a22a6a2915df96e90b9913e8e6a52"> </div> </a> <div class="one-px-border"></div></section>
<section class="middle_mode has_action"><a href="http://mp.weixin.qq.com/s?__biz=MjM5MDI5OTkyOA==&mid=2665524017&idx=5&sn=570d001fed931dfe5d9fdac9d2c67530&chksm=bd52e9468a256050abf9a0335f271c2338dc43168f705ed2d1acf48133b2e27a870ad8f5fd53#rd" class="article_link clearfix"><div class="desc"><h3 class="dotdot line3 image-margin-right">哈佛大学出版社的镇社之宝，竟是一套中国史！</h3> <div class="item_info"><span class="src space">一条</span><span class="cmt space">评论 35</span><span class="dislike-news mid-space fr"></span></div> </div><div class="list_img_holder"><img src="./头条_files/28558-13d152b90d8d46cc02e9d5a602160052"> </div> </a> <div class="one-px-border"></div></section>
<section class="middle_mode has_action"><a href="http://mp.weixin.qq.com/s?__biz=MjM5MDI5OTkyOA==&mid=2665524017&idx=6&sn=f69f8bebc0cf08c7ba608ad7645d3591&chksm=bd52e9468a2560505f87d25830729433728ae873c0d002db56fca34386a56abd2fa344417b66#rd" class="article_link clearfix"><div class="desc"><h3 class="dotdot line3 image-margin-right">晚清国画大师画的竹子，让他们给做成了一双筷子……</h3> <div class="item_info"><span class="src space">一条</span><span class="cmt space">评论 45</span><span class="dislike-news mid-space fr"></span></div> </div><div class="list_img_holder"><img src="./头条_files/28558-9d466fc648d9f9fa5788f76383bdb869"> </div> </a> <div class="one-px-border"></div></section>
<section class="middle_mode has_action"><a href="http://mp.weixin.qq.com/s?__biz=MjM5MDI5OTkyOA==&mid=2665524017&idx=7&sn=8002f31f1e7dbbe672006b3afefc9161&chksm=bd52e9468a256050b774538ab9842004474dee0f579150a45d1d4cdb60dde2dfd8087ab18da8#rd" class="article_link clearfix"><div class="desc"><h3 class="dotdot line3 image-margin-right">限量仅200盒的鲜桂花普洱，手慢无！</h3> <div class="item_info"><span class="src space">一条</span><span class="cmt space">评论 17</span><span class="dislike-news mid-space fr"></span></div> </div><div class="list_img_holder"><img src="./头条_files/28558-fe0c73ee2c626bd628fd92300c643ee9"> </div> </a> <div class="one-px-border"></div></section>
<section class="middle_mode has_action"><a href="http://mp.weixin.qq.com/s?__biz=MjM5ODIyMTE0MA==&mid=2650968810&idx=1&sn=2e315bedca47143dc35d79e0ed11bc50&chksm=bd3836d18a4fbfc798bc09722319963e4caaf53a69c5ab6341354ad5da7c8f23a9df38a06c73#rd" class="article_link clearfix"><div class="desc"><h3 class="dotdot line3 image-margin-right">48 小时开发一个有商业价值的小应用可好?</h3> <div class="item_info"><span class="src space">小道消息</span><span class="cmt space">评论 154</span><span class="dislike-news mid-space fr"></span></div> </div><div class="list_img_holder"><img src="./头条_files/28558-864f5af57d17ed737af8c7bd4f1b733e"> </div> </a> <div class="one-px-border"></div></section>
<section class="middle_mode has_action"><a href="http://mp.weixin.qq.com/s?__biz=MjAzNzMzNTkyMQ==&mid=2653753248&idx=1&sn=d1a5b1faf70dc5deaa3e85ed5c246d56&chksm=4a891fbe7dfe96a8b17bb47688b1c040aee6c7019392de030ad6c98d9c5e6676e0864a82b4ce#rd" class="article_link clearfix"><div class="desc"><h3 class="dotdot line3 image-margin-right">8点1氪：苹果第四财季业绩下滑；vivo和OPPO超越华为成为中国前两大手机厂商；Google Pixel手机预售大幅超过预期</h3> <div class="item_info"><span class="src space">36氪</span><span class="cmt space">评论 36</span><span class="dislike-news mid-space fr"></span></div> </div><div class="list_img_holder"><img src="./头条_files/28558-4be398d354b0ebbc8472b7d02161b06e"> </div> </a> <div class="one-px-border"></div></section>
<section class="middle_mode has_action"><a href="http://mp.weixin.qq.com/s?__biz=MjAzNzMzNTkyMQ==&mid=2653753248&idx=2&sn=0e68a8a222ef2e79d3f8a44635b92d61&chksm=4a891fbe7dfe96a8bec7f2d048de368d89d6af4ebe743c08039cdd1f498b204664d4d8890f3a#rd" class="article_link clearfix"><div class="desc"><h3 class="dotdot line3 image-margin-right">在锤子内部孵化两年，VR项目团队或要解散了</h3> <div class="item_info"><span class="src space">36氪</span><span class="cmt space">评论 10</span><span class="dislike-news mid-space fr"></span></div> </div><div class="list_img_holder"><img src="./头条_files/28558-8eef49058196dc4e05d337db0f00db34"> </div> </a> <div class="one-px-border"></div></section>
</div><div id="divMore" class="list_bottom" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1); display: none;"><section class="loadmoretip"><a href="" old-text="">加载中...</a></section></div></content>
