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; }); }); });
代码中的 $('a[href^="#"]').on('click'... 部分表示将页面中所有 href 开头为 # 的 a 标签绑定了 click 事件。当点击这类链接时,会触发一个动作,即页面会平滑地滚动到与该链接对应的目标元素的顶部,实现了点击链接后自动定位到目标元素位置的效果。
其中,代码中的 $target.offset().top-0 表示目标元素顶部距离页面顶部的偏移值,900 表示动画持续时间,'swing' 表示缓动函数类型。
通过以上简单的 jQuery 代码,就可实现页面中点击链接自动定位到目标元素的效果,让用户体验更加友好。