锚点的应用

锚点的应用

锚点没有页面滚动,所以在h5类似聊天页面,返回上一页滚到记录的位置比scroll 体验效果好

1、通过 a 标签 href 然后 页面有个元素 有相同的 id,点击即可跳转至id位置 但不准确 一般不用

<a href="#id"></a>

<span id = "id" ><span>

2、跨页面的锚点用法

 a标签把其中的href="#1"，更改为href=“index2.html/#1,页面会跳转到index2.html中的ID=1的div所在的区域。
 只适合两个页面定位锚点是死的 如果动态的话就不行了

聊天

下拉加载一页后在最下面插入

<span name="postion'+(page)+'" id="postion'+(page)+'"></span>

<a href="#postion'+(page)+'" id="click'+page+'"></a>

我是在每一页第一条数据前插入空标签
    for(var i=0;i < response.data.arr.length;i++){
        $('#ulBox').prepend('<li>'+response.data.arr[i]+'</li>')
        if(response.data.arr[i] == 1){
            $('#ulBox').prepend('<span name="postion'+(page)+'" id="postion'+(page)+'">
            </span><a href="#postion'+(page)+'" id="click'+page+'"></a>');
        }
    }
    //渲染完后
    if(page >1){
        document.getElementById('click'+(page)).click();
    }

返回上一页之后 因为数据是动态产生的，动态标记的定位id 不在了，无法进行锚点定位 页面刷新连锚点都没有;

1思考 将返回的数据二次处理 每条数据加一个5位数的id;渲染并记录 储存 ;在返回的时候得到 构造锚点 click

2 记录位置可以试试这个方法

window.scrollTo(0, 1000)

转载于:https://www.cnblogs.com/zkqbk/p/10058883.html