做一个酒店的列表页面,遇到一个问题,点击下一页后页面定位在分页的地方,用了更好的用户体验,点击下一页后页面定位到顶部。
首先想到的是利用HTML锚点:
①:设置一个锚点链接<a href="#PageTop" id="maoDian" >回到顶部</a>;(注意:href属性的属性值最前面要加#)
②:在页面中需要的位置设置锚点<a name="PageTop"></a>;(注意:a标签中要写一个name属性,属性值要与①中的href的属性值一样,不加#)标签中按需填写必要的文字,一般不写内容
锚点设置好了以后又遇到一个新的问题,如何实现在点击下一页后自动定位到页面顶部,而非手动点击“回到顶部”,要实现页面自定定位,我想到利用jQuery的click()方法:
$("#maoDian").click();
本以为这样就OK啦,其实不然!!!
直接通过.click()方法是不能触发<a >的跳转事件的,必须通过a的子元素,例如
<a href="#PageTop" id="maoDian" >
直接调用click()方法无效
$("#maoDian").click();
可以这样:
$("#maoDian").append("<span></span>");
$("#maoDian span").click();
测试通过,万事大吉!!!