在jQ中,通过点击后是页面滑动到指定位置,可以采取先获取要到达的位置距离页面总高度顶部的距离,再在点击时使页面上移:当前高度-目标位置距离顶部的距离
使用方法前提:需要引入jq.js和wow.js()
jq.js下载地址:Download jQuery | jQuery
wow.js下载地址:wow.js — Reveal Animations When Scrolling (wowjs.uk)
...
<link rel="stylesheet" href="./css/animate.min.css">
...
<div>
...
<ul class="nav navbar-nav navbar-right" id="bs-example-navbar-collapse-1">
<li><a href="#idea">整装产品</a></li>
</ul>
...
<div id="idea">
...
</div>
</div>
<script src="./js/jquery-3.7.1.min.js"></script>
<script src="./js/wow.min.repeat.js"></script>
<script>
new WOW().init();
$('#bs-example-navbar-collapse-1 a[href],#about a[href],#case a[href],#idea a[href],#home a[href],#foot a[href]').click(function () {
// location.pathname 返回当前URL的路径名(不包含域名)
// console.log(location.pathname) 系统的路径
// console.log(location.pathname.replace(/^\//,''))
// console.log(this.pathname.replace(/^\//, '')) 当前元素所跳转链接替换后的路径
// console.log(location.hostname) //系统获取域名部分
// console.log(this.hostname) //当前元素所跳转链接的域名部分
console.log("1");
//判断你跳转的链接 是不是在当前界面
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
//获取将要跳转的锚点位置
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
//一定要当他找到锚点元素的时候,才跳转锚点
if ($target.length) {
//获取目标元素的位置
var targetOffset = $target.offset().top + 10;
//让页面的body和html 滚动到 targetOffset这个位置
$('html,body').animate({
scrollTop: targetOffset
}, 1000);
}
}
});
</script>