淘先锋技术网

首页 1 2 3 4 5 6 7

jQuery是一款非常流行的JavaScript库,其中有很多有用的方法。今天我们来介绍一种非常实用的方法——页内查网址

jquery方法页内查网址

在网页中,我们经常需要跳转到一些锚点或者标识位置,比如页面中的某个标题、页脚等等。此时,我们可以使用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,实现修改网址的效果。

通过以上操作,我们就可以实现一个完美的页内查网址功能啦!