淘先锋技术网

首页 1 2 3 4 5 6 7

jQuery 点击定位页面底部的方法非常简单,只需要通过一些基本的 jQuery 代码即可实现。


$(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-0
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});

jquery点击定位页面底部

代码中的 $('a[href^="#"]').on('click'... 部分表示将页面中所有 href 开头为 # 的 a 标签绑定了 click 事件。当点击这类链接时,会触发一个动作,即页面会平滑地滚动到与该链接对应的目标元素的顶部,实现了点击链接后自动定位到目标元素位置的效果。

其中,代码中的 $target.offset().top-0 表示目标元素顶部距离页面顶部的偏移值,900 表示动画持续时间,'swing' 表示缓动函数类型。

通过以上简单的 jQuery 代码,就可实现页面中点击链接自动定位到目标元素的效果,让用户体验更加友好。