title: collapsing section and scrolling back to top
body: <p>I am working on a long one-pager. Yes, I know, we hate one-pagers. At least I promise not to implement any parallax-effect, I promise :)</p>
  
  <p>I have multiple sections I can open/close. This part works fine.</p>
  
  <p>The problem: those sections get pretty long, and when they are being closed/collapsed, the user find himself somewhere in the middle of the one-pager.</p>
  
  <p>So, when collapsing a section,  I want it to collapse AND to smooth scroll back to the top/the start of the collapsed section.</p>
  
  <p>Here my script:</p>
  
  <pre><code>// Section-Collapse
      //---------------------------------------------------------
      $("section a.read-more").click(function() {
          if($(this).parents("section").hasClass("expanded")) {
  
              var scrollAnchor = $(this).attr("data-scroll"),
              scrollPoint = $(".anchor[data-anchor='" + scrollAnchor + "']").offset().top - 0;
  
              $("body,html").animate({
                  scrollTop: scrollPoint
              }, 1500, function() {
  
                  // close/collapse section
                  $(this).parents("section").addClass("close");
                  $("section.expanded.close div.expandable-content").slideUp();
                  $(this).parents("section").removeClass("expanded").removeClass("close");
                  alert("this test-message is being displayed");
  
              });
  
  
          } else {
  
              // open section
                  $(this).parents("section").addClass("expanded");
                  $("section.expanded div.expandable-content").slideDown();
  
  
          }
      });
  </code></pre>
  
  <p>The problem: this part is not being executed EXCEPT the alert message, that one works. Although it is trying to open the dialog window multiple times and Firefox offers me to block this behavior.</p>
  
  <pre><code>// einklappen
                      $(this).parents("section").addClass("close");
                      $("section.expanded.close div.expandable-content").slideUp();
                      $(this).parents("section").removeClass("expanded").removeClass("close");
                      alert("this test-message is being displayed");
  </code></pre>
  
  <p>It scrolls back to top, to the anchor, but the section will not collapse...</p>
  
  <p>Any ideas why it won't collapse?</p>
  
  <p>Regards,
  Milan</p>
  
  <p>---------------------------UPDATE</p>
  
  <p>So, it was a problem with the scope of variable "this".</p>
  
  <p>This code here seems to work fine:</p>
  
  <pre><code>// Section-Collapse
      //---------------------------------------------------------
      $("section a.read-more").click(function() {
          if($(this).parents("section").hasClass("expanded")) {
  
              var scrollAnchor = $(this).attr("data-scroll"),
              scrollPoint = $(".anchor[data-anchor='" + scrollAnchor + "']").offset().top - 0;
  
              var global_this = $(this);
  
              $("body,html").animate({
                  scrollTop: scrollPoint
              }, 1500, function() {
  
                  // einklappen
                  global_this.parents("section").addClass("close");
                  $("section.expanded.close div.expandable-content").slideUp();
                  global_this.parents("section").removeClass("expanded").removeClass("close");
                  alert("this test-message is being displayed");
              });
  
              // return false;
  
          } else {
  
              // ausklappen
                  $(this).parents("section").addClass("expanded");
                  $("section.expanded div.expandable-content").slideDown();
  
  
          }
      });
  </code></pre>
  
  <p>What is bothering me: why this script tries to open multiple alert dialogs?</p>