1. Efectos comunes de posicionamiento del punto de anclaje:
<a name="print"></a>
<div id="print">
<!-- HTTP请求没有 # -->
o
<a href="#print"></a>
<div id="print">
<!-- HTTP请求有 # -->
Con este método, si hay una barra de navegación fija en la parte superior de la página web, parte del posicionamiento del punto de anclaje común quedará oscurecido, lo que es difícil de compensar con estilos. Entonces puedes considerar el segundo método js para simular el efecto de salto del punto de anclaje.
2.JS simula el efecto de salto del punto de anclaje; consulte el artículo anterior para obtener una introducción detallada
Este es el artículo anterior sobre el punto de ancla: jquery simula el efecto de posicionamiento del punto de ancla: Posicionamiento del punto de ancla: cómo establecer la distancia entre el punto de ancla y la parte superior de la página, la posición del punto de ancla y un cierto desplazamiento desde la parte superior
Sin embargo, esta URL simulada no tiene un valor # (hash). Si la navegación tiene otras páginas, no será fácil retroceder. Por ejemplo: la página actual es la página de detalles de información inmobiliaria. Si quiero hacer
clic en el álbum de bienes raíces, el efecto deseado es saltar. Vaya a la página de inicio y luego ancle a la ubicación del álbum de bienes raíces; solución: HTML:
agregue
un
ancla # a la etiqueta de navegación (el mismo nombre que la clase que simula el evento de clic de anclaje), y luego use js para obtener el valor hash de la URL. Después de cargar, determine si la URL tiene un valor hash. Si es así, ejecute el evento hash correspondiente haciendo clic en el lado js (el código se adjunta de la siguiente manera)
<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:hover a {
color: #3490d3
}
.listnav .searchcon {
float: right;
position: relative;
width: 285px;
height: 30px;
margin-top: 10px;
background: #fff;
display: flex;
flex-direction: row;
justify-content: space-between;
border-radius: 2px;
}
.listnav .tel {
float: right;
margin-right: 20px;
font-size: 20px;
line-height: 50px;
color: #000;
font-weight: 500px;
}
.listnav .searchbox {
position: relative;
width: 240px;
height: 30px;
padding-left: 10px;
font-size: 14px;
line-height: 30px;
color: #666;
}
.listnav .searchbox .searchinp {
display: block;
position: relative;
width: 100%;
height: 100%;
background: none;
border: 0;
outline: none;
}
.listnav .searchcon .searchico {
width: 15px;
height: 15px;
margin: 7px 10px 0 0;
}
.listnav .searchcon .searchicoinp {
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 30px;
opacity: 0;
z-index: 2;
cursor: pointer;
}
js:
// 锚点定位
function topMao(target) {
$('html, body').animate({
scrollTop: $(target).offset().top - $('.topfubox').height()
}, 500); //130为锚点到距顶部的距离，500为执行时间
return false;
}
$('.huxingmao').click(function () {
topMao('#huxing');
})
$('.xiangcemao').click(function () {
topMao('#xiangce');
})
$('.xinximao').click(function () {
topMao('#xinxi');
})
$('.mapmao').click(function () {
topMao('#map');
})
$('.fangdaimao').click(function () {
topMao('#fangdai');
})
$('.zixunmao').click(function () {
topMao('#zixun');
})
$('.tuijianmao').click(function () {
topMao('#tuijian');
})
//用js获取url的hash值，页面加载后判断url是否带有hash值，如有，侧js执行点击相应的hash事件
var hash = window.location.hash;
if (hash != '') {
var hashinp = hash.substr(1, hash.length);
console.log(hashinp);
$('.' + hashinp).click();
}
Otro:
cuando la página se desplaza a la posición correspondiente, el texto de navegación se resalta;
html:
<div class="topfubox clearfix">
<div class="topfucon cenbox clearfix">
<div class="lefbox">
<div class="ltop">
<p class="lptit">水岸花语(A栋)</p>
<p class="lptxt">3室2厅1卫</p>
<p class="lptxt">98.88㎡</p>
<p class="lptxt red">155万</p>
</div>
<div class="lbom bltan" type="6">
<p>发送楼盘最新资料和价格到手机 </p>
<span class="sendinfo">立即发送</span>
</div>
</div>
<div class="rigbox">
<div class="tximg">
<img src="img/guwenpic.jpg" alt="">
</div>
<div class="namebox">
<p class="name">刘朝</p>
<p class="yongjin">佣金≤2.0%
<span>|</span> 美堂房产
</p>
</div>
<div class="daikan">
<span>带看</span>
<!-- 带看 用线上咨询插件 -->
<span>电话咨询</span>
<!-- 以后做小程序 扫码拨号 -->
<a class="linkover" href="#" target="_blank"></a>
</div>
</div>
</div>
<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 class="searchcon">
<div class="searchbox">
<input type="text" placeholder="请试试输入楼盘名或小区" class="searchinp">
</div>
<img src="img/searchico.png" alt="" class="searchico">
</div> -->
</div>
</div>
CSS:
.topfucon {
display: none;
height: 100px;
}
.topfubox .lefbox {
position: relative;
float: left;
width: 530px;
}
.topfubox .lefbox .ltop {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 10px;
}
.topfubox .lefbox .ltop .lptit {
position: relative;
font-size: 24px;
color: #000;
line-height: 50px;
margin-right: 20px;
max-width: 220px;
height: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.topfubox .lefbox .ltop .lptxt {
position: relative;
font-size: 20px;
color: #666;
line-height: 50px;
}
.topfubox .lefbox .ltop .red {
color: #ff3a3a;
}
.topfubox .lefbox .lbom {
position: relative;
display: flex;
flex-direction: row;
font-size: 16px;
color: #333;
line-height: 40px;
}
.topfubox .lefbox .lbom p {
display: block;
padding-left: 24px;
background: url(../img/newhouseico.png) no-repeat 0 -198px;
}
.topfubox .lefbox .lbom span {
color: #fff;
padding: 0 15px;
height: 26px;
line-height: 26px;
border-radius: 20px;
background: #ff3a3a;
margin-left: 10px;
margin-top: 8px;
cursor: pointer;
}
.topfubox .rigbox {
float: right;
position: relative;
width: 450px;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 10px;
}
.topfubox .rigbox .tximg {
position: relative;
width: 80px;
height: 80px;
overflow: hidden;
border-radius: 100%;
}
.topfubox .rigbox .tximg img {
width: 100%;
height: auto;
min-height: 100%;
}
.topfubox .rigbox .namebox {
position: relative;
margin-left: 10px;
}
.topfubox .rigbox .namebox .name {
font-size: 18px;
color: #666;
line-height: 40px;
}
.topfubox .rigbox .namebox .yongjin {
font-size: 14px;
color: #666;
line-height: 30px;
}
.topfubox .rigbox .namebox .yongjin span {
color: #999;
}
.topfubox .rigbox .daikan {
display: flex;
flex-direction: row;
font-size: 16px;
color: #fff;
line-height: 34px;
margin-left: 20px;
margin-top: 28px;
}
.topfubox .rigbox .daikan span {
display: block;
height: 34px;
margin-left: 10px;
background: #ff3a3a;
padding: 0 15px;
border-radius: 20px;
background: #ff3a3a;
margin-left: 10px;
cursor: pointer;
}
js:
var topBoxTop = $('.topfubox').offset().top + 50;
var tab_l = $('.listnav li').length;
var tabctnOffsetTopArr = [];
var dingweiArr = ['huxing', 'xiangce', 'xinxi', 'map', 'fangdai', 'zixun', 'tuijian'];
$(window).scroll(function () {
setElPosition()
})
function setElPosition() {
var top = $(document).scrollTop();
if (top > topBoxTop) {
console.log(1);
$('.topfubox').addClass('fixed');
$('.topfubox .listnav').removeClass('cenbox');
$('.topfubox .topfucon,.zhanwei').show();
} else {
console.log(2);
$('.topfubox').removeClass('fixed');
$('.topfubox .listnav').addClass('cenbox');
$('.topfubox .topfucon,.zhanwei').hide();
}
var setNavBarStyle = function (el, top, arr) {
// if (clickSetStyle) {
for (var i = 0; i < arr.length; i++) {
if (top >= arr[i]) {
el.eq(i).addClass('on').siblings('li').removeClass('on')
}
}
// }
}
setNavBarStyle($('.listnav .xiangqingul li'), top, tabctnOffsetTopArr)
}
$(document).ready(function () {
setElPosition();
for (var i = 0; i < tab_l; i++) {
if (dingweiArr.length > 0) {
var offsettop = $('#' + dingweiArr[i]).offset().top - 200;
tabctnOffsetTopArr.push(offsettop)
}
}
console.log(tabctnOffsetTopArr);
})
Idea: escriba el ID de la sección correspondiente al punto de anclaje de la página en la matriz. La página se carga para obtener la altura del ID desde la parte superior de la página. Se ejecuta el evento de desplazamiento de la página. Al desplazarse al valor de altura del correspondiente matriz, se resalta el texto de navegación correspondiente.
Desventajas: La sección de navegación en la página es indispensable, si una determinada sección está oculta en una determinada página, entonces. . . La cuestión queda por estudiar. . .
Artículo de referencia: https://blog.csdn.net/weixin_42839080/article/details/82825295