Question

我有一个很长的表格，submit button最初位于中间，一旦用户滚动经过submit button，按钮就会变粘。

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

我要在display: block;中出现错误时使它显示，视图窗口将自动平滑跳转到该文本（而不仅仅是跳转到顶部，因为有时submit button的位置在错误），但无法正常工作。

有见识吗？

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

将$('html, body').animate的显示更改为click后，需要将.error脚本移至block函数。

Answer 2

显示错误div之后的

将动画函数添加到错误div，

并将其添加到动画的回调函数中，以调用moveScroller函数，

经过更多测试后，我建议我们设置scrollTop-50，以防单击并显示页面顶部的错误。

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

      $('html, body').animate({
           scrollTop: $(".errors").offset().top - 50
      }, 2000, function() {
           moveScroller();
     });
});

Answer 3

将vhost类的显示更改为block后：

.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) });基本获得.errors的位置，然后将其作为选项应用到window.scroll。

此处的代码段

offset().top

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;
}

当其内联CSS是显示块时，平滑跳转到目标div

3 个答案: