JS跳转到指定元素的位置

Posted keke..lele

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS跳转到指定元素的位置相关的知识,希望对你有一定的参考价值。

 

需求背景

在开发过程中,经常遇到用户提出 如果某个内容没有填写,则需要弹出提示,并且将页面滚动到指定位置的需求。那这种情况应该怎么实现呢?
具体代码如下:

一、给链接a加个#的方式来实现跳转。

<div id="container">
    <a href="#div1">div1</a>
    <a href="#div2">div2</a>
    <a href="#div3">div3</a>
</div>

直接模拟点击链接事件即可实现跳转。

缺点:刷新界面或者回退的时候,会有问题。 

 

二、用animate属性

 
<input id="selectDepartManager" class="ant-input monthInput" style="width: 200px;" type="text" />
 $(".monthInput").blur(function () {
           
            if ($(this).val().trim() == ‘‘) {
      $("html, body").animate(
                        { scrollTop: $(this).offset().top },
                        { duration: 500, easing: "swing" }
                    );
                return;
            }
            else {
                this.style.borderColor = ‘#d9d9d9‘;
            }
        })
 

以上是关于JS跳转到指定元素的位置的主要内容,如果未能解决你的问题,请参考以下文章

点击事件然后页面跳转到指定DOM元素的位置

JS / jQuery 实现页面跳转到指定位置-锚点

在线求个Js跳转到当前页面的指定位置!哪位大神帮帮忙!

怎么用JS获取某一个指定页面(非本页面)的HTML代码?

如何用js添加点击事件,点击后跳转到指定动态页面

js 如何实现点击a标签跳转b页面,并且跳到b页面的指定位置d处