2 Replies Latest reply on Jun 24, 2014 12:54 PM by smcguire+coj

    stage overflow settings for scroll to anchor

    smcguire+coj

      Hi,

       

      I'm trying to do "scroll to anchor" functionality like the one here:  Edit fiddle - JSFiddle

       

      My code only works if the Stage's overflow is set to hidden.

      var anchorId = sym.$('#feature02');

      $('html, body').animate({scrollTop: anchorId.offset().top}, 500);

       

      I'm pulling in content from a json file (generated by a content management system), though, so I don't know how long the resultant page will be.  Also, it looks like the max Stage height setting is 10000, which is too short.

       

      So, overflow set to auto lets me see all of my content but kills my "scroll to anchor" functionality.  Also, an overflow set to auto causes a nasty double scroll bar on the windows side.

       

      Any thoughts?

       

      Thanks

      -Sherry

        • 1. Re: stage overflow settings for scroll to anchor
          heathrowe Most Valuable Participant

          Are you sure the reference variable name is correct?

           

          For starters you can't have an element name start with a special character as you have '#feature02'.

          You should not need to change the overflow - visible, should suffice.

           

          Darrell

          1 person found this helpful
          • 2. Re: stage overflow settings for scroll to anchor
            smcguire+coj Level 1

            Hi Heathrowe,

             

            Thanks for your reply.  Visible seems to both work for "scrolling to anchor" and fixing the nasty double scroll bar.  Thanks so much.

             

            Regarding #feature02:  I'm pulling in the data via a json file, then wrapping an anchor tag around the id:

            output += '<a id="feature0' + val.id + '" name="feature0' + val.id + '"> </a>';

             

            I'm then referring to it from the button with this:

            var anchorId = sym.$('#feature02');

             

            Which follows the "Work with elements directly" section of the JSAPI:

            "Accessing imported HTML content through actions can be done by using sym.$("#myId"); to target the ID or class of your element."

             

            Thanks again.  I'm embarking on a major Edge Animate / Kentico CMS project, so I can use all of the help that I can get.

             

            -Sherry