Scroll to Target Offset

[toad78]

I’m having a little trouble getting my code to go to the specified target with an offset. The point is to have it go to the heading of the content (and Accordion section). Right now what’s going on:

When you click on the image in the “How am I going to pay for my medical bills?” (or even the link text) example, it scrolls then bounces up and then back down but still does not hit the heading target.

Here’s the code:

<script type="text/javascript">
 	jQuery(document).ready (function() {
      jQuery( ".imageframe-align-center > span.fusion-imageframe" ).removeClass( "open-accordion" );
      jQuery( ".imageframe-align-center > span.fusion-imageframe > a").addClass( "open-accordion" );
	  jQuery(".open-accordion").click(function() {
          var anchorlink = jQuery(this).attr('href').replace(/^.*?/,'');          
          jQuery(anchorlink+".panel-collapse.collapse").addClass("in");
          jQuery('a[data-target="'+anchorlink+'"]').addClass("active");
          jQuery('html,body').animate({ scrollTop: jQuery('#toggle-content').offset().top }, 500);
          console.log('anchorlink='+anchorlink);
          jQuery(anchorlink+".panel-collapse.collapse.active").removeClass("active");
	});
});
</script>

Thank you.

[m3g4p0p]

Hi @toad78, I don’t quite get where the double bouncing is coming from… does that also happen with that JS snippet alone? As for the offset itself, you’ll have to add the header height to avoid having it overlap the target element; also you should probably remove the active class before starting the animation, not afterwards.

[toad78]

The ‘bouncing’ affect didn’t start occurring until I added the offset line.

As for your suggestion that I have to create a header height, I bet you’re right on that, so I’ll have to work on that.

Thank you for the suggestion.

[toad78]

Okay, so I’ve modified the code but still can’t get it to land on (or just above) the accordion heading item.

<script type="text/javascript">
      jQuery(document).ready (function() {
      jQuery( ".imageframe-align-center > span.fusion-imageframe" ).removeClass( "open-accordion" );
      jQuery( ".imageframe-align-center > span.fusion-imageframe > a").addClass( "open-accordion" );
	  jQuery(".open-accordion").click(function() {
          var anchorlink = jQuery(this).attr('href').replace(/^.*?/,'');          
          jQuery(anchorlink+".panel-collapse.collapse").addClass("in");
          jQuery('a[data-target="'+anchorlink+'"]').addClass("active");
          jQuery('html,body').animate({ scrollTop: jQuery('a[data-openlink="' + target + '"]').offset().top - (jQuery('.panel-heading').height() + 25)},500,'swing');
          console.log('anchorlink='+anchorlink);
          jQuery(anchorlink+".panel-collapse.collapse.active").removeClass("active");
	});
});
</script>

[m3g4p0p]

@toad78

jQuery('a[data-openlink="' + target + '"]').offset().top

You’re getting a reference error here as target is not defined; also there doesn’t appear to be an element with a data-openlink attribute. Did you mean something like this?

jQuery('[data-toggle="' + this.hash + '"]').offset().top