多语言展示
当前在线:1481今日阅读:27今日分享:41

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

有两个页面(a.html,b.html),且a页面包含b页面的链接,点击a页面链接跳转到b页面的功能对任何一个WEB开发者来说都很容易,但如何实现跳转到b页面的特定位置呢,甚至是平滑滚动实现?本文即介绍此功能的实现过程,希望对大家有所帮助。
工具/原料
1

html页面

2

代码编辑器

方法/步骤
1

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

2

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

3

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

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);        }    });

5

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

6

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

7

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

注意事项
1

Jquery文件的引入,否则js会不起作用

2

瞄点的书写,注意“name”和“id”

推荐信息