前端

JS跳转到指定元素的位置

云博小周宇1 Min Read

 

需求背景

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

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

div1
div2
div3
<
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‘;
            }
        })