JavaScript 平滑滚动至页面锚点,且不改变 URL 地址
示例:🌏 HTML色彩方案 - 点击
纯色
或渐变色
,以下代码无需修改,直接使用即可~
- 平滑滚动至锚点
$(function(){
$('a').click(function(){
// 根据a标签的 href 转换为 id 选择器,获取 id 元素所处的位置,并高度减 79px(可根据需要自由设置)
$('html,body').animate({scrollTop: ($($(this).attr('href')).offset().top -79 )},1000);
});
});
- 页面添加锚点后点击不改变 URL
(function(){
var allJump=[];
var allA=document.querySelectorAll("a");// 获取所有a标签
allA.forEach((ele, index)=>{
if(ele.href.search("#") > 12){
allJump.push(ele);// 判断a标签是否含有#
}
})
allJump.forEach((ele)=>{
ele.addEventListener("click",(e)=>{
// 首先解析出href
e.preventDefault();// 这个非常关键
var jumpTarget = ele.href.split("#")[1]
if(jumpTarget){
var targaetEle=document.querySelector("#" + jumpTarget);
h = targaetEle.offsetTop;
window.scrollTo(0,1000);
}else{
window.scrollTo(0,0);
}
});
})
}).call()
标题:JavaScript 平滑滚动至页面锚点,且不改变 URL 地址
作者:Mune
地址:https://cnxiaobai.com/articles/2021/05/14/1620928067347.html
评论
0 评论