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

问题描述

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

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

我想当错误出现时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>

标签： jquery

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

问题描述

解决方案

推荐阅读