jquery - 当其内联CSS为显示 block 时平滑跳转到目标div

Question

我有一个很长的表单，其中提交按钮最初位于中间，一旦用户滚动经过提交按钮，该按钮就会粘住。

现在，表单错误文本位于表单的末尾，并且最初是隐藏的，如果出现错误，它将更改为内联 css 中的 display: block;。

我想在 display: block; 出现错误时做到这一点， View 窗口会自动平滑跳转到该文本(不仅仅是跳到顶部，因为有时 提交按钮位置位于错误上方)，但它不起作用。

有什么见解吗？

P/S:我已经搜索并测试了几个代码，但它不起作用。

function moveScroller() {
var $anchor = $("#scroller-anchor");
    var $scroller = $('#scroller');

    var move = function() {
        var st = $(window).scrollTop();
        var ot = $anchor.offset().top;
        if(st > ot) {
            $scroller.css({
                position: "fixed",
                bottom: "4%",
                left: "1%"
            });
        } else {
            $scroller.css({
                position: "relative",
                top: "",
                left: ""
            });
        }
    };
    $(window).scroll(move);
    move();
}

$(function() {
  moveScroller();
});

$(".submit-button a").on("click",function(){
    $(".errors").css("display","block");
});

if($('.errors').css('display') == 'block') {
    $('html, body').animate({
        scrollTop: $(".errors").offset().top
            }, 2000);
}

.errors {
  color: red;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum odio vel velit ullamcorper facilisis. Curabitur nec sem hendrerit, consequat enim sollicitudin, ultricies lectus. In ultrices metus sed ante scelerisque luctus quis id lectus. Mauris vel ligula ex. Vestibulum justo enim, vulputate in ex vitae, consequat venenatis libero. Nam posuere elementum lectus et feugiat. Morbi dignissim egestas facilisis. Curabitur porta mi at quam suscipit, at rutrum ligula ullamcorper. Praesent et sodales dolor. Aenean erat erat, dictum sed leo ac, pharetra semper eros. Donec viverra tincidunt condimentum. Sed varius, ex finibus lacinia suscipit, nisl ipsum dapibus ex, ut fringilla lacus massa sit amet ligula. Fusce eu metus erat. Mauris pretium ipsum quis elementum gravida. Nullam ipsum tellus, iaculis sed sollicitudin non, dapibus id nisi. Ut orci lectus, volutpat ac orci quis, dapibus venenatis libero.</p>

<div id="scroller-anchor"></div>
<div id="scroller" class="submit-button"><a style="color: blue; cursor: pointer; background: pink;">SUBMIT BUTTON!</a></div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum odio vel velit ullamcorper facilisis. Curabitur nec sem hendrerit, consequat enim sollicitudin, ultricies lectus. In ultrices metus sed ante scelerisque luctus quis id lectus. Mauris vel ligula ex. Vestibulum justo enim, vulputate in ex vitae, consequat venenatis libero. Nam posuere elementum lectus et feugiat. Morbi dignissim egestas facilisis. Curabitur porta mi at quam suscipit, at rutrum ligula ullamcorper. Praesent et sodales dolor. Aenean erat erat, dictum sed leo ac, pharetra semper eros. Donec viverra tincidunt condimentum. Sed varius, ex finibus lacinia suscipit, nisl ipsum dapibus ex, ut fringilla lacus massa sit amet ligula. Fusce eu metus erat. Mauris pretium ipsum quis elementum gravida. Nullam ipsum tellus, iaculis sed sollicitudin non, dapibus id nisi. Ut orci lectus, volutpat ac orci quis, dapibus venenatis libero. <br> Integer pellentesque scelerisque diam ut egestas. Praesent arcu nunc, dignissim at cursus non, consectetur in erat. Nunc eu risus quis tortor sagittis fringilla sed eu mauris. Aliquam erat volutpat. Fusce sit amet accumsan est. Curabitur eleifend augue sit amet feugiat bibendum. Aliquam maximus pharetra mi eget commodo. <br> Mauris mattis, est eu suscipit volutpat, magna purus efficitur quam, ac malesuada mauris mauris vel diam. Etiam sagittis nibh rutrum urna porta, cursus suscipit sem porta. Maecenas suscipit enim nec ipsum venenatis facilisis. Praesent tincidunt molestie nunc, non blandit quam mattis et. Suspendisse in mi interdum, ultrices leo eu, consectetur mi. Ut malesuada mi in urna ultrices aliquam. Praesent in tincidunt mi. Nam quis finibus mauris. <br> Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam in aliquet arcu. Vivamus quis tellus nec augue congue molestie. Duis a diam nec velit malesuada luctus. Duis pretium consequat sodales. Curabitur posuere nunc eget ipsum condimentum consequat. Fusce suscipit id velit sed sollicitudin. Cras congue a felis vitae semper. Suspendisse faucibus porttitor lectus, non porta arcu tempor vitae. Sed vitae vestibulum justo, id pulvinar massa. Ut non libero non urna rutrum venenatis. Curabitur eleifend interdum justo quis rhoncus. Praesent volutpat leo a egestas elementum. <br> Curabitur at leo fringilla, dignissim turpis at, semper ante. Aliquam eu finibus risus, eget ultrices mauris. Phasellus non neque vel tellus tempus vestibulum rhoncus vitae mauris. In consectetur, justo vel lacinia auctor, lectus nisl pharetra ex, non tempor enim ligula quis justo. Curabitur eu enim tincidunt, rhoncus mauris quis, scelerisque ipsum. Vivamus molestie consectetur turpis eu condimentum. Maecenas tincidunt leo quis vestibulum sagittis. Nulla et diam lobortis metus consequat faucibus. Ut molestie metus quis orci porta, non egestas libero tempus. Ut sagittis, enim in finibus euismod, odio felis egestas arcu, quis sagittis nulla enim vitae arcu. Nullam eu cursus urna. Maecenas quis accumsan dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras vel suscipit justo, vitae volutpat ipsum. In ut fermentum erat, non pharetra velit.</p>

<div class="errors">One or more fields have an error. Please check and try again.</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum odio vel velit ullamcorper facilisis. Curabitur nec sem hendrerit, consequat enim sollicitudin, ultricies lectus. In ultrices metus sed ante scelerisque luctus quis id lectus. Mauris vel ligula ex. Vestibulum justo enim, vulputate in ex vitae, consequat venenatis libero. Nam posuere elementum lectus et feugiat. Morbi dignissim egestas facilisis. Curabitur porta mi at quam suscipit, at rutrum ligula ullamcorper. Praesent et sodales dolor. Aenean erat erat, dictum sed leo ac, pharetra semper eros. Donec viverra tincidunt condimentum. Sed varius, ex finibus lacinia suscipit, nisl ipsum dapibus ex, ut fringilla lacus massa sit amet ligula. Fusce eu metus erat. Mauris pretium ipsum quis elementum gravida. Nullam ipsum tellus, iaculis sed sollicitudin non, dapibus id nisi. Ut orci lectus, volutpat ac orci quis, dapibus venenatis libero. <br> Integer pellentesque scelerisque diam ut egestas. Praesent arcu nunc, dignissim at cursus non, consectetur in erat. Nunc eu risus quis tortor sagittis fringilla sed eu mauris. Aliquam erat volutpat. Fusce sit amet accumsan est. Curabitur eleifend augue sit amet feugiat bibendum. Aliquam maximus pharetra mi eget commodo.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum odio vel velit ullamcorper facilisis. Curabitur nec sem hendrerit, consequat enim sollicitudin, ultricies lectus. In ultrices metus sed ante scelerisque luctus quis id lectus. Mauris vel ligula ex. Vestibulum justo enim, vulputate in ex vitae, consequat venenatis libero. Nam posuere elementum lectus et feugiat. Morbi dignissim egestas facilisis. Curabitur porta mi at quam suscipit, at rutrum ligula ullamcorper. Praesent et sodales dolor. Aenean erat erat, dictum sed leo ac, pharetra semper eros. Donec viverra tincidunt condimentum. Sed varius, ex finibus lacinia suscipit, nisl ipsum dapibus ex, ut fringilla lacus massa sit amet ligula. Fusce eu metus erat. Mauris pretium ipsum quis elementum gravida. Nullam ipsum tellus, iaculis sed sollicitudin non, dapibus id nisi. Ut orci lectus, volutpat ac orci quis, dapibus venenatis libero. <br> Integer pellentesque scelerisque diam ut egestas. Praesent arcu nunc, dignissim at cursus non, consectetur in erat. Nunc eu risus quis tortor sagittis fringilla sed eu mauris. Aliquam erat volutpat. Fusce sit amet accumsan est. Curabitur eleifend augue sit amet feugiat bibendum. Aliquam maximus pharetra mi eget commodo.</p>

Answer 1

将 .errors 类的显示更改为阻止后:

$(".submit-button a").on("click",function(){
    $(".errors").css("display","block");
    //here
    const errPos = $(".errors").offset().top;
    //adding  - 100 to bring it to a level of the eye that's noticeable.
    let options = {top: errPos - 100, left: 0, behavior: 'smooth'};
    window.scroll(options)
});

基本上使用 offset().top 获取 .errors 的位置，然后将其作为选项应用于 window.scroll 。

这里的片段:

function moveScroller() {
  var $anchor = $("#scroller-anchor");
  var $scroller = $('#scroller');

  var move = function() {
    var st = $(window).scrollTop();
    var ot = $anchor.offset().top;
    if (st > ot) {
      $scroller.css({
        position: "fixed",
        bottom: "4%",
        left: "1%"
      });
    } else {
      $scroller.css({
        position: "relative",
        top: "",
        left: ""
      });
    }
  };
  $(window).scroll(move);
  move();
}

$(function() {
  moveScroller();
});

$(".submit-button a").on("click", function() {
  $(".errors").css("display", "block");
  //here
  const errPos = $(".errors").offset().top
  let options = {
    top: errPos - 100,
    left: 0,
    behavior: 'smooth'
  };
  window.scroll(options)
});

.errors {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum odio vel velit ullamcorper facilisis. Curabitur nec sem hendrerit, consequat enim sollicitudin, ultricies lectus. In ultrices metus sed ante scelerisque luctus quis id lectus. Mauris
  vel ligula ex. Vestibulum justo enim, vulputate in ex vitae, consequat venenatis libero. Nam posuere elementum lectus et feugiat. Morbi dignissim egestas facilisis. Curabitur porta mi at quam suscipit, at rutrum ligula ullamcorper. Praesent et sodales
  dolor. Aenean erat erat, dictum sed leo ac, pharetra semper eros. Donec viverra tincidunt condimentum. Sed varius, ex finibus lacinia suscipit, nisl ipsum dapibus ex, ut fringilla lacus massa sit amet ligula. Fusce eu metus erat. Mauris pretium ipsum
  quis elementum gravida. Nullam ipsum tellus, iaculis sed sollicitudin non, dapibus id nisi. Ut orci lectus, volutpat ac orci quis, dapibus venenatis libero.</p>

<div id="scroller-anchor"></div>
<div id="scroller" class="submit-button"><a style="color: blue; cursor: pointer; background: pink;">SUBMIT BUTTON!</a></div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum odio vel velit ullamcorper facilisis. Curabitur nec sem hendrerit, consequat enim sollicitudin, ultricies lectus. In ultrices metus sed ante scelerisque luctus quis id lectus. Mauris
  vel ligula ex. Vestibulum justo enim, vulputate in ex vitae, consequat venenatis libero. Nam posuere elementum lectus et feugiat. Morbi dignissim egestas facilisis. Curabitur porta mi at quam suscipit, at rutrum ligula ullamcorper. Praesent et sodales
  dolor. Aenean erat erat, dictum sed leo ac, pharetra semper eros. Donec viverra tincidunt condimentum. Sed varius, ex finibus lacinia suscipit, nisl ipsum dapibus ex, ut fringilla lacus massa sit amet ligula. Fusce eu metus erat. Mauris pretium ipsum
  quis elementum gravida. Nullam ipsum tellus, iaculis sed sollicitudin non, dapibus id nisi. Ut orci lectus, volutpat ac orci quis, dapibus venenatis libero. <br> Integer pellentesque scelerisque diam ut egestas. Praesent arcu nunc, dignissim at cursus
  non, consectetur in erat. Nunc eu risus quis tortor sagittis fringilla sed eu mauris. Aliquam erat volutpat. Fusce sit amet accumsan est. Curabitur eleifend augue sit amet feugiat bibendum. Aliquam maximus pharetra mi eget commodo. <br> Mauris mattis,
  est eu suscipit volutpat, magna purus efficitur quam, ac malesuada mauris mauris vel diam. Etiam sagittis nibh rutrum urna porta, cursus suscipit sem porta. Maecenas suscipit enim nec ipsum venenatis facilisis. Praesent tincidunt molestie nunc, non
  blandit quam mattis et. Suspendisse in mi interdum, ultrices leo eu, consectetur mi. Ut malesuada mi in urna ultrices aliquam. Praesent in tincidunt mi. Nam quis finibus mauris. <br> Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam
  in aliquet arcu. Vivamus quis tellus nec augue congue molestie. Duis a diam nec velit malesuada luctus. Duis pretium consequat sodales. Curabitur posuere nunc eget ipsum condimentum consequat. Fusce suscipit id velit sed sollicitudin. Cras congue a
  felis vitae semper. Suspendisse faucibus porttitor lectus, non porta arcu tempor vitae. Sed vitae vestibulum justo, id pulvinar massa. Ut non libero non urna rutrum venenatis. Curabitur eleifend interdum justo quis rhoncus. Praesent volutpat leo a egestas
  elementum. <br> Curabitur at leo fringilla, dignissim turpis at, semper ante. Aliquam eu finibus risus, eget ultrices mauris. Phasellus non neque vel tellus tempus vestibulum rhoncus vitae mauris. In consectetur, justo vel lacinia auctor, lectus nisl
  pharetra ex, non tempor enim ligula quis justo. Curabitur eu enim tincidunt, rhoncus mauris quis, scelerisque ipsum. Vivamus molestie consectetur turpis eu condimentum. Maecenas tincidunt leo quis vestibulum sagittis. Nulla et diam lobortis metus consequat
  faucibus. Ut molestie metus quis orci porta, non egestas libero tempus. Ut sagittis, enim in finibus euismod, odio felis egestas arcu, quis sagittis nulla enim vitae arcu. Nullam eu cursus urna. Maecenas quis accumsan dui. Pellentesque habitant morbi
  tristique senectus et netus et malesuada fames ac turpis egestas. Cras vel suscipit justo, vitae volutpat ipsum. In ut fermentum erat, non pharetra velit.</p>

<div class="errors" style="color: red;">One or more fields have an error. Please check and try again.</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum odio vel velit ullamcorper facilisis. Curabitur nec sem hendrerit, consequat enim sollicitudin, ultricies lectus. In ultrices metus sed ante scelerisque luctus quis id lectus. Mauris
  vel ligula ex. Vestibulum justo enim, vulputate in ex vitae, consequat venenatis libero. Nam posuere elementum lectus et feugiat. Morbi dignissim egestas facilisis. Curabitur porta mi at quam suscipit, at rutrum ligula ullamcorper. Praesent et sodales
  dolor. Aenean erat erat, dictum sed leo ac, pharetra semper eros. Donec viverra tincidunt condimentum. Sed varius, ex finibus lacinia suscipit, nisl ipsum dapibus ex, ut fringilla lacus massa sit amet ligula. Fusce eu metus erat. Mauris pretium ipsum
  quis elementum gravida. Nullam ipsum tellus, iaculis sed sollicitudin non, dapibus id nisi. Ut orci lectus, volutpat ac orci quis, dapibus venenatis libero. <br> Integer pellentesque scelerisque diam ut egestas. Praesent arcu nunc, dignissim at cursus
  non, consectetur in erat. Nunc eu risus quis tortor sagittis fringilla sed eu mauris. Aliquam erat volutpat. Fusce sit amet accumsan est. Curabitur eleifend augue sit amet feugiat bibendum. Aliquam maximus pharetra mi eget commodo.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum odio vel velit ullamcorper facilisis. Curabitur nec sem hendrerit, consequat enim sollicitudin, ultricies lectus. In ultrices metus sed ante scelerisque luctus quis id lectus. Mauris
  vel ligula ex. Vestibulum justo enim, vulputate in ex vitae, consequat venenatis libero. Nam posuere elementum lectus et feugiat. Morbi dignissim egestas facilisis. Curabitur porta mi at quam suscipit, at rutrum ligula ullamcorper. Praesent et sodales
  dolor. Aenean erat erat, dictum sed leo ac, pharetra semper eros. Donec viverra tincidunt condimentum. Sed varius, ex finibus lacinia suscipit, nisl ipsum dapibus ex, ut fringilla lacus massa sit amet ligula. Fusce eu metus erat. Mauris pretium ipsum
  quis elementum gravida. Nullam ipsum tellus, iaculis sed sollicitudin non, dapibus id nisi. Ut orci lectus, volutpat ac orci quis, dapibus venenatis libero. <br> Integer pellentesque scelerisque diam ut egestas. Praesent arcu nunc, dignissim at cursus
  non, consectetur in erat. Nunc eu risus quis tortor sagittis fringilla sed eu mauris. Aliquam erat volutpat. Fusce sit amet accumsan est. Curabitur eleifend augue sit amet feugiat bibendum. Aliquam maximus pharetra mi eget commodo.</p>