Smooth scroll and focus textarea

Question

I want a link towards the top of the page

<a href="#comment-textarea" id="comment-click">Comment</a>

that when clicked, scrolls to the bottom of the page, where the form is. Alongside scrolling to the form smoothly, it focuses that textarea.

Right now I'm using this for smooth scrolling .

And to focus the textarea, I'm using this.

$("#comment-click").click(function() {
  $("#comment-textarea").focus();
});

It's basic, I know. This works and it smooths but it's buggy. On click, the screen sort of flashes. I think what's happening is when I click the link, it goes straight to the bottom of the page where the textarea is to focus it, then, within milliseconds, it starts the smooth scroll from the top of the page. How can I fix this??

Answer 1

Try to focus your textarea after finish scrolling:

$(function () {
    $('a[href*=#]:not([href=#])').click(function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000, function () {
                    $("#comment-textarea").focus();
                });
                return false;
            }
        }
    });
});

Answer 2

You are racing the smooth scroll to the bookmark with your focus call.

You really want to call focus after the animation has completed. The hacky way is to run it after a timeout, but really you should adapt the smooth scrolling script to accept a callback that will run after the animation completes.

Hack...

$("#comment-click").click(function() {
    window.setTimeout(function () {
        $("#comment-textarea").focus();
    }, 1000);
});

Example of using an "animation complete" callback

$("#comment-click").click(function() {
  if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
          }, 1000, function () {
          $("#comment-textarea").focus();
        });
        return false;
      }
    }
  }
});

Answer 3

You can fix it by removing the click function displayed above and adding an oncomplete function to the smooth scroll animation:

$(function () {
    $('a[href*=#]:not([href=#])').click(function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {

            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000, function(){ // function to focus here
                    $("#comment-textarea").focus();
                });
                return false;
            }
        }
    });
});