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 评论
avatar

取消