CODEWITHSUNDEEP
javascriptjqueryhtmlcssscroll
Maszkytny
Maszkytny

Reputation: 3

Problems with scrolling after FadeIn

i'm having this problem with scrolling after fading in div. It's working perfectly well normally, when the div is visible, but when you click on nav, which cause it to fadein from invisible and then scroll, i get this error:

Uncaught TypeError: Cannot read property 'substr' of undefined

HTML code

<nav><a href="#a1"></a><a href="#a2"></a><a href="#a3"></a></nav>
<main> /*in which i have few anchors to scroll to
<a name="a1"></a>
/*some code
<a name="a2"></a>
/*some code
<a name="a3"></a>
/*some code
</main>
<div id="additionalinfo" style="display: none"> /* div which goes in when main fadesout and viceversa
/*some code
</div>

Jquery

$('nav a[href^="#"]').click(function () {
    if ($('#additionalinfo').is(":visible")) {
        $('#additionalinfo').fadeOut(function () {
            $('main').fadeIn(function () {
                $('html, body').animate({
                    scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
                }, 500);

                return false;
            });
        });
    }

Tried a lot to go past it, but coudn't manage. What im trying to do here is when u click on nav when ur at #additionalinfo the div is fadingout, main is fading in, and then it should scroll to the right anchor in main. The last part isnt working at all. Some ideas?

Upvotes: 0

Views: 126

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

In $('[name="' + $.attr(this, 'href').substr(1) + '"]'), this is not what you think it is... The scope of this always is related to the current function: $('html, body').animate() in this case. So this is 'html, body', not the clicked element. And that's why the error since there is no href on those elements.

So in the click handler, you will get the href attribute in a variable right away:

var target = $(this).attr('href').substr(1);

Additionnal thing: you have to prevent the normal link behavior using .preventDefault(), so it won't "override" your .animate() effect.

I don't know what's the use of #additionalinfo here... And I assumed a lot on your HTML markup and script, which was not "complete" enough to reproduce the issue.

$('nav a[href^="#"]').click(function (e) {
  e.preventDefault();
  console.log("click");
  
  var target = $(this).attr('href').substr(1);
  console.log(target);
  
  if ($('#additionalinfo').is(":visible")) {
    $('#additionalinfo').fadeOut(function () {
      $('main').fadeIn(function () {
        $('html, body').animate({
          scrollTop: $('[name="' + target + '"]').offset().top
        }, 500);
        return false;
      });
    });
  }else{
    $('#additionalinfo').show();  // Assumed this to make the previous condition true someday...
  }
});
#additionalinfo{
  border:1px solid black;
  height:1em;
}
.spacer{
  height:50em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav>
  <a href="#a1">a1</a>
  <a href="#a2">a2</a>
  <a href="#a3">a3</a>
</nav>
<div id="additionalinfo" style="display: none">-- Additionnal Info --</div>
<main>
  <a name="a1">MAIN a1</a><br>
  <div class="spacer"></div>
  <a name="a2">MAIN a2</a><br>
  <div class="spacer"></div>
  <a name="a3">MAIN a3</a>
  <br>
  <div class="spacer"></div>
</main>

Upvotes: 1

Related Questions