How to show a div and then scroll to it

Question

I have a page with a number of hidden divs that are toggled with a click on a corresponding button. Pretty basic jQuery stuff. Now, what I'd like to do is have a relative hyperlink (for instance, ) in one of these divs that opens another div and scrolls the page to this element. I can get it to do the scroll to visible when the link is not connected to an event in jQuery, and I can open the div when the link is connect to jQuery. But I want to do both at the same time!

Here is my handler

  $('.B2BHL').click(function() {
    var month = this.href.substring(this.href.indexOf('#') + 1);
    //$('#' + month + 'div').show();
    window.location.href = this.href;
  });

When the show() call is commented out, it scrolls. When it is uncommented, it opens the div, but doesn't scroll to it

I found the following two questions on Stack Overflow:

Scroll to a div using jquery

Can I call jquery click() to follow an <a> link if I haven't bound an event handler to it with bind or click already?

But neither is working for me. I am using IE 11. Can anyone advise?

Thanks

Better if you could create a similar demo using **Snippet** or **[JSFiddle](http://www.jsfiddle.net)**. — divy3993, Apr 08 '16 at 15:18

score 0 · Answer 1 · answered Apr 08 '16 at 15:24

I guess that the problem can be on the show() function, you can try to modify your code a little so changes the window.location.href once the show function has completed, like:

$('.B2BHL').click(function() {
    var month = this.href.substring(this.href.indexOf('#') + 1);
    var href = this.href;
    $('#' + month + 'div').show({
        complete: function() {
           window.location.href = href;
        }
    });    
});

score 0 · Accepted Answer · edited May 23 '17 at 11:51

Actually, I went back and looked at the first link (Scroll to a div using jquery) I posted, tried it again, and it worked

  $('.B2BHL').click(function() {
    var idx = this.href.indexOf('#');
    var month = this.href.substring(this.href.indexOf('#') + 1);
    var href = this.href;
    $('#' + month + 'div').show({
      complete: function() {
        goToByScroll(month + 'div');
      } 
    }); 
  });

Sorry, I hadn't put in enough work on this. And thanks for the help to all who responded

How to show a div and then scroll to it

2 Answers2