0

I'm using javascript to control where my page page scrolls to after clicking on an anchor link, as I have a fixed nav.

I have one page that the anchors + script work correctly on (PAGE B). My issue is that I have buttons on a different page (PAGE A) that need to go the anchors on the correctly working page (PAGE B). The anchor itself works correctly, but the javascript does not fire.

The reason why it's not firing (tested by putting an alert and not receiving a popup) is because the javascript for the buttons on PAGE A does not know to look for the element on PAGE B. After googling for three hours I cannot figure out how to tell it to look at a new page instead of just the hierarchy of elements. I'm sure this is stupidly simple, but I'm a beginner at javascript and appreciate the help.

The code:

PAGE A Button HTML:

<a href="productsandservices.html#financing" class="btn btn-sm btn-default     
actively2">Learn more</a>

PAGE A Javascript:

<script>
$("div ul li a[href^='productsandservices.html#']").on('click', function(e) {
  // prevent default anchor click behavior
  e.preventDefault();
  // animate
$('html, body').animate({
   scrollTop: $(this.hash).offset().top - 150
 }, 300, function(){
 });
});</script>

PAGE B Anchor HTML:

<div class="col-md-10 col-md-offset-1 col-sm-12 col-xs-12"><section id="financing">

PAGE B: Javascript: (the exact same as PAGE A)

$("div ul li a[href^='productsandservices.html#']").on('click', function(e) {
  // prevent default anchor click behavior
  e.preventDefault();
  // animate
$('html, body').animate({
   scrollTop: $(this.hash).offset().top - 150
 }, 300, function(){
 });
});</script>

Please and Thanks.

nauset3tt
  • 65
  • 6
  • This is not possible. You can however use [iframes to do this](http://stackoverflow.com/questions/1451208/access-iframe-elements-in-javascript?lq=1). The other alternative is to design your site as a Single Page Application (SPA). Another solution is not to go full-blown SPA but to make use of AJAX to load page fragments dynamically. – Jasen Aug 22 '14 at 18:21
  • This makes sense as to why I couldn't find any answers. Thanks for stopping my mad googling at least! – nauset3tt Aug 24 '14 at 19:06

2 Answers2

1

Page B will never be able to respond to a click event on the previous page, which seems to be what you're trying to do in the code.

Try using location.hash to access the hash instead.

$(window).on('hashchange', function(e) {
    $('html, body').animate({
        scrollTop: $(location.hash).offset().top - 150
    }, 300);
});
last-child
  • 4,481
  • 1
  • 21
  • 19
  • Where would I put this? on PAGE A or PAGE B? – nauset3tt Aug 24 '14 at 05:22
  • You would put it on the page you're loading, so page B. The code above is intended as an illustration of how to use `location.hash` and `.on('hashchange')`. Since I haven't seen the rest of your code I can't know if the snippet will work as-is. For instance, you should probably add a check that `$(location.hash)` really exists, and you might want to use jQuerys `ready` event instead of `hashchange`. – last-child Aug 24 '14 at 08:42
0

I also came up with a different solution.

I moved added a names, and placed them at the end of the previous div before the section id. Then I added some extra padding to each header of the anchor. This way, I can smoothly travel to an anchor on a different page. Arguably, this does not solve my javascript issue, but it can count as (not too badly) hacked work-around.

Not sure the contribution was worth it but as I'm always asking and never giving solutions as I'm still learning I figured I could at least answer my own question!

Basically, instead of having 

<div class="a">
  <section id="a"><h2>Title</h2></section>
  <p>yadda yadda</p>
</div>

<div class="b">
  <section id="b"><h2>Title</h2></section>
  <p>yadda yadda</p>
</div>

<div class="c">
  <section id="c"><h2>Title</h2></section>
  <p>yadda yadda</p>
</div>

I added 30px of padding to each div in the css:

div.a, div.b, div.c {
  padding:30px 0px;
}

And added a names to the section above the div in question, like so:

yadda yadda

  
<div class="a">
  <section id="a"><h2>Title</h2></section>
  <p>yadda yadda</p>
  <a name="#b">&nbsp;</a>
</div>

<div class="b">
  <section id="b"><h2>Title</h2></section>
  <p>yadda yadda</p>
  <a name="#c">&nbsp;</a>
</div>

<div class="c">
  <section id="c"><h2>Title</h2></section>
  <p>yadda yadda</p>
</div>

I understand the a name is depreciated using HTML5, but drupal 7 has an issue with recognizing relative anchors. This also solved that issue.

nauset3tt
  • 65
  • 6