使用JS获取页面URL中的锚点值实现特定跳转

 时间:2026-02-14 00:27:53

1、新建a.html,b.html文件(此步骤需要了解html,css ,js的基础知识),详见下图:

使用JS获取页面URL中的锚点值实现特定跳转

使用JS获取页面URL中的锚点值实现特定跳转

使用JS获取页面URL中的锚点值实现特定跳转

2、注意a.html文件中跳转链接的填写

使用JS获取页面URL中的锚点值实现特定跳转

3、在b.html文件中引入jquery文件,需要注意原生javascript和JQuery的区别,本文采用JQuery的形式。

使用JS获取页面URL中的锚点值实现特定跳转

使用JS获取页面URL中的锚点值实现特定跳转

4、具体js内容的编写,简单的a链接完全可以实现跳转,但是跳转显得太突兀,使用js目的有两个:

(1)跳转到b.html的特定位置;

(2)在跳转过程中浏览器滚动条平滑滚动

$(function() {      

 var thisId = window.location.hash;       

var mao = $("#honor"); //获得锚点       

if (thisId == "#honor") {//判断对象是否存在       

var pos = mao.offset().top;       

$("html,body").animate({ scrollTop: pos}, 3000);       

}   

});

使用JS获取页面URL中的锚点值实现特定跳转

5、b.html文件中瞄点位置的书写:

使用JS获取页面URL中的锚点值实现特定跳转

6、为了加深了解,针对步骤4中关键js内容的进一步说明:

使用JS获取页面URL中的锚点值实现特定跳转

7、使用浏览器打来a.html,点击链接查看效果

使用JS获取页面URL中的锚点值实现特定跳转

使用JS获取页面URL中的锚点值实现特定跳转

  • 怎么关闭QQ登录时弹出的迷你首页
  • 七月直播端怎么下载
  • 快报怎么隐藏福利中心的入口
  • 数字哨兵怎么操作
  • 华之悲鸣攻略
  • 热门搜索
    养字五笔怎么打 怎么吹口哨 女孩英语怎么说 红色毛衣怎么搭配 安全期怎么算 诺优能奶粉怎么样 濑尿虾怎么剥 ps怎么合并图层 我的世界铁砧怎么用 包皮垢怎么清洗