Jquery可以帮助我们在网页中实现各种交互效果,比如当我们点击页面中的某一项时,可以通过代码让当前项自动置顶,从而让用户更方便地查看该项内容。
$(document).ready(function(){ //点击目标元素时执行以下函数 $(".click-item").click(function(e){ e.preventDefault(); //获取目标元素距离网页顶部的距离 var targetPos = $(this.hash).offset().top; //动画使页面滚动到目标位置 $('html, body').animate({scrollTop: targetPos}, 800); }); });
以上代码中,我们首先用document.ready函数确保所有的HTML已经加载完成,然后使用类选择器找到点击目标元素,并为其设定点击事件。通过e.preventDefault函数,我们阻止了默认的点击跳转行为。接着,我们获取目标元素距离网页顶部的距离,并通过动画使页面滚动到目标位置。