最新接触了一个项目需要实现定位提示页面某个部分文本没有输入,请输入。网上百度一波,发现有4种方法(也许可能更多)。特此记录一下。

1 锚点法

  锚点法,就是利用href属性,URL以#elementName的形式访问某个name属性为elementName的节点。代码如下。

// 其中的一种表现形式,其格式‘#name’固定不变。
<a href="#anchorName">点击跳转当前页面指定锚点</a>

2 动画滚动法

  动画滚动法就是充分利用ScrollTop属性的特性(被卷去的页面高度),以动画的形式实现。相关代码如下:

// $(checkItem).offset().top表示$(checkItem)节点距离顶部组件的高度,1000表示动画时间
 $('html , body').animate({scrollTop: $(checkItem).offset().top}, 1000);

3 scrollIntoView()

  官方文档显示这是一个实验的方法,我的浏览器能成功实现。其代码如下:

// 这里使用了jquery选择器,scrollIntoView()官方解释说控件滚动到可见区域(一般是浏览器最顶端)。其先详细用法参照官方文档。
// 为什么需要添加[0]呢,scrollIntoView()是js方法,然而$("#cao")是jquery对象,是DOM集合。
$("#cao")[0].scrollIntoView();

4 scrollTo(Top,left,behavior)

  top表示到顶部的距离,left表示到左边的距离,behavior表示行为默认smooth。相关代码如下:

window.scrollTo({
	top: $('#cao').offset().top,
	behavior: 'smooth'
});
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐