1.常见的锚点定位效果:
<a name="print"></a>
<div id="print">
<!-- HTTP请求没有 # -->
或
<a href="#print"></a>
<div id="print">
<!-- HTTP请求有 # -->
这种方法,如果网页中有顶部固定导航栏,那么常见的锚点定位就会被遮住了一部分,很难用样式弥补。于是可以考虑第二种方法 js模拟锚点跳转效果
2.js模拟锚点跳转效果 见上一篇详细介绍
这是锚点上一篇:jquery模拟锚点定位效果:锚点定位——如何设置锚点居页面顶部距离,锚点定位并距离顶部一定偏移
但是,这样模拟url是没有#(hash)值的 如果导航有其他分页,就不容易跳回了,比如:
当前页是楼盘信息详情页,如果我想点楼盘相册,想要的效果是跳转到首页,再锚点定位到楼盘相册的位置;
解决方案:
html:
给导航a标签 添加一个#锚点(与模拟锚点点击事件的class同名),后面再用js获取url的hash值,面加载后判断url 是否带有hash值,如有,侧js执行点击相应的hash 事件(附代码如下)
<div class="listnav cenbox">
<div class="cenbox clearfix">
<ul class="xiangqingul">
<li class="on">
<a href="#huxingmao" class="huxingmao">楼盘户型</a>
</li>
<li>
<a href="#xiangcemao" class="xiangcemao">楼盘相册</a>
</li>
<li>
<a href="#xinximao" class="xinximao">楼盘信息</a>
</li>
<li>
<a href="#mapmao" class="mapmao">位置配套</a>
</li>
<li>
<a href="#fangdaimao" class="fangdaimao">贷款计算</a>
</li>
<li>
<a href="#zixunmao" class="zixunmao">楼盘资讯</a>
</li>
<li>
<a href="#tuijianmao" class="tuijianmao">好房推荐</a>
</li>
</ul>
<p class="tel">咨询电话: 400-815-8655</p>
</div>
</div>
css:
/* listnav */
.listnav {
position: relative;
width:1200px;
margin:0 auto;
background: #f4e827;
}
.listnav ul {
float: left;
position: relative;
width: 900px;
display: flex;
flex-direction: row;
}
.listnav ul.xiangqingul {
width: 930px;
}
.listnav ul li {
position: relative;
padding: 0 25px;
font-size: 20px;
line-height: 50px;
color: #000;
font-weight: 500px;
}
.listnav ul li a {
color: #000;
}
.listnav ul li.on {
color: #3490d3
}
.listnav ul li.on a, .listnav ul li:h