#StackBounty: #jquery Smooth jump to target div when its inline css is display block

Bounty: 50

I’ve a very long form on which the submit button is initially at the middle and once user scroll past the submit button, the button gonna be sticky.

Now, the form error text is at the end of the form and it is initially hidden, and if got error it will change to display: block; in inline css.

I want to make it when the error is in display: block; , the view window gonna automatically smooth jump to that text (not just jump to top because sometimes the submit button position is above the error), but it is not working.

Any insight?

P/S : I’ve already search and test several codes, but it is not working.

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;
}
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
<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>

<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>
One or more fields have an error. Please check and try again.
<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>


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.