jQuery是一款非常流行的JavaScript库,其中有很多有用的方法。今天我们来介绍一种非常实用的方法——页内查网址。
在网页中,我们经常需要跳转到一些锚点或者标识位置,比如页面中的某个标题、页脚等等。此时,我们可以使用jQuery的 scrollTop
方法来实现定位,让网页滚动到指定位置。但是如果我们直接使用这个方法,只能通过代码来触发跳转,用户无法通过修改网址来快速到达指定位置。这时候,我们可以使用 hash
属性和 on
方法相结合,实现页内查网址的效果。
具体操作如下:
$(document).ready(function(){ $('a[href^="#"]').on('click',function(e){ e.preventDefault(); var target = this.hash; var $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().top }, 900, 'swing', function () { window.location.hash = target; }); }); });
以上代码中,首先我们使用 $('a[href^="#"]')
选择器选中了所有指向网页内的锚点的超链接,然后添加了 on
事件,监听了点击事件。当用户点击锚点超链接时,会触发回调函数,其中:
- 使用
e.preventDefault()
阻止默认行为,也就是超链接跳转 - 使用
this.hash
获取超链接中的hash
属性(即跳转目标的名称),并赋值给target
- 使用
$(target)
方法选中跳转目标的元素,并赋值给$target
- 使用
$('html, body').animate()
方法让网页滚动到指定位置(动画效果渐变),其中'scrollTop': $target.offset().top
表示网页滚动到 $target 元素顶部的位置 - 在动画完成后,使用
window.location.hash = target
将跳转目标的名称赋值给window.location.hash
,实现修改网址的效果。
通过以上操作,我们就可以实现一个完美的页内查网址功能啦!