Menu icon Foundation
anchor links not working through different page

Hi I have Magellan set up on my home page to scroll to different sections of my page and it works fine, however if I want to link to a specific section through a different page I get a strange issue. I have several links however only one causes an issue, instead of linking to the target location, it just go to the bottom of the target page, the others work fine which is the strange bit. Does anyone know anything about this? here is my code

//target sections

<div class="row">
    <div class="large-8 column large-centered" id="third" data-magellan-target="third">
    	<h2 class="heading">Location</h2>
    	<div class="border">
    		<div id="map">
    			<!--Map Location-->
    		</div>
    	</div>
    
    </div>
</div>


//anchor link

<li><a href="index.html#third">Location</a></li>

         

Magellansitesanchorhtml

Hi I have Magellan set up on my home page to scroll to different sections of my page and it works fine, however if I want to link to a specific section through a different page I get a strange issue. I have several links however only one causes an issue, instead of linking to the target location, it just go to the bottom of the target page, the others work fine which is the strange bit. Does anyone know anything about this? here is my code

//target sections

<div class="row">
    <div class="large-8 column large-centered" id="third" data-magellan-target="third">
    	<h2 class="heading">Location</h2>
    	<div class="border">
    		<div id="map">
    			<!--Map Location-->
    		</div>
    	</div>
    
    </div>
</div>


//anchor link

<li><a href="index.html#third">Location</a></li>

         

This post has been closed. No new replies can be added.

Jacob Brooks over 3 years ago

Do you happen to have a live link to your issue, it might be a bit easier to debug with a working sample. Your description is good, just hard to know if something is messing up without a test.

Rafi Benkual over 3 years ago

I concur with Jacob - It's hard to tell what's going on here with the code provided. Are you trying to link to a page that has Magellan, then smooth scroll to a destination when that page loads from the corresponding anchor?

Siavoush over 3 years ago

Hi thank you for getting back, i am developing the site locally at the moment so I can't provide a link, I ran a few tests and found out that something in foundation.css is causing the issue, without it, the anchors work fine. @Rafi Benkual yes I am linking to a page that has magellan however i don't care about scrolling to it, as long as it loads the correct target section.

Also I found that it is not just one link, only the first anchor will work, any other anchor just goes straight to the bottom of my target page

edit
I downloaded a clean copy of foundation and tried linking to several sections on the default and the anchors work fine so it must be something In my html, I don't know what I've done wrong, I have linked a code pen with all my html
http://codepen.io/anon/pen/eJQNQR

Siavoush over 3 years ago

this is my entire index.html page, is there anything wrong?

<!doctype html>
<html class="no-js" lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Bedford Court Mansions, WC1</title>
  <link rel="stylesheet" href="css/foundation.css" />
  <link rel="stylesheet" href="css/app.css" />
  <link rel="stylesheet" href="material-photo-gallery-master/dist/css/material-photo-gallery.css">
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>

  <header id="first" data-magellan-target="first">
    <div class="row logo">
      <div class="large-12 columns">
        <img src="img/hsc.png" alt="Logo">
      </div>
    </div>

    <nav>
      <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
        <button class="menu-icon" type="button" data-toggle></button>
        <div class="title-bar-title">Bedford Court Mansions, WC1</div>
      </div>

      <div class="top-bar" id="main-menu">
        <div class="top-bar-left">
          <ul class="dropdown menu" data-dropdown-menu>
            <li class="menu-text">Bedford Court Mansions, WC1</li>
          </ul>
        </div>
        <div class="top-bar-right">
          <ul class="menu vertical medium-horizontal nav" data-responsive-menu="drilldown medium-dropdown" data-magellan>
            <li><a href="#">Home</a></li>
            <li><a href="http://localhost/sai-xampp/PDO-test/minisite/sales.php">Sales</a></li>
            <li><a href="http://localhost/sai-xampp/PDO-test/minisite/lettings.php">Lettings</a></li>
            <li><a href="#second">Gallery</a></li>
            <li><a href="#third">Location</a></li>
            <li><a href="#fourth">Contact Us</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </header>

  <main>
    <div class="row banner">
      <div class="large-12 column">
        <img src="img/banner.png" alt="Bedford Court Mansions Banner">
      </div>
    </div>

    <div class="row">
      <div class="large-8 column large-centered">
        <h2 class="heading">About</h2>
        <p class="content border">
          <br> Bedford Court Mansions along with the rest of Bedford Avenue was constructed in the 1890’s to replace the mews to the South Side of Bedford Square. It comprised of family flats each containing five to twelve rooms, with a large central courtyard designed to assist with the lighting and ventilation with the idea to improve upon building standards that existed in London in the late 1800’s. Situated in the London Borough of Camden, and immediately south of Bedford Square in the heart of Bloomsbury, Bedford Court Mansions is ideally located for the superb amenities of the West End, Covent Garden, the heart of theatre land and Soho are just short stroll away.
          <br>
          <br> The nearest underground stations are Tottenham Court Road (Northern and Central Lines) and Goodge Street (Northern Line). There are numerous bus services that provide easy access across the City and West End. Just round the corner from Bedford Court Mansions is The British Museum, the first National Museum in the world, opened on the 15th January 1759, with its international exhibitions. A collection of seven million objects representing the rich history of human cultures mirrors the city of London's global variety. In no other museum can the visitor see so clearly the history of what it is to be human.
        </p>
      </div>
    </div>

    <div id="back-top" data-magellan>
      <a href="#first"><img src="img/up-arrow.png" alt=""></a>
    </div>

    <div class="row heading-row">
      <div class="large-8 column large-centered" id="second" data-magellan-target="second">
        <h2 class="heading">Gallery</h2>
        <div class="m-p-g border">
          <div class="m-p-g__thumbs" data-google-image-layout data-max-height="250">
            <img src="img/Gallery/01.jpg" data-full="img/Gallery/01.jpg" class="m-p-g__thumbs-img" />
            <img src="img/Gallery/02.jpg" data-full="img/Gallery/02.jpg" class="m-p-g__thumbs-img" />
            <img src="img/Gallery/03.jpg" data-full="img/Gallery/03.jpg" class="m-p-g__thumbs-img" />
            <img src="img/Gallery/04.jpg" data-full="img/Gallery/04.jpg" class="m-p-g__thumbs-img" />
            <img src="img/Gallery/05.jpg" data-full="img/Gallery/05.jpg" class="m-p-g__thumbs-img" />
            <img src="img/Gallery/06.jpg" data-full="img/Gallery/06.jpg" class="m-p-g__thumbs-img" />
            <img src="img/Gallery/07.jpg" data-full="img/Gallery/07.jpg" class="m-p-g__thumbs-img" />
            <img src="img/Gallery/08.jpg" data-full="img/Gallery/08.jpg" class="m-p-g__thumbs-img" />
            <img src="img/Gallery/09.jpg" data-full="img/Gallery/09.jpg" class="m-p-g__thumbs-img" />
          </div>

          <div class="m-p-g__fullscreen"></div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="large-8 column large-centered" id="third" data-magellan-target="third">
        <h2 class="heading">Location</h2>
        <div class="border">
          <div id="map">
            <!--Map Location-->
          </div>
        </div>

      </div>
    </div>

    <div class="row">
      <div class="large-8 column large-centered">
        <h2 class="heading">Area Information</h2>
        <div class="content border">
          <br>
          <h3>Sights</h3>
          <p>London has some of the most famous sights such as the Royal Observatory or the Science Museum and close to Bedfort Court Mansion in Bloomsbury you can view the famous Charles Dickens Museum or St Pancras Church at ease.</p>

          <h3>Attractions</h3>
          <p>London’s most famous attractions such as the London Eye, Tower Bridge and the Buckingham Palace are definitely the best places to visit when you have an off day from work but there are also some fantastic attractions close to Bedford Court Mansions such as the London Rib Voyages and abundance of theatres to delight you during the evenings.</p>

          <h3>Squares &amp; parks</h3>
          <p>There are quite a few beautiful green spaces in the heart of the city that includes guided winter walks in the Bloomsbury squares or you could go and visit London’s finest landscapes such as the Hyde Park or St. James’s Park.</p>

          <h3>Job Opportunities</h3>
          <p>There are thousands of job opportunities in Bloomsbury in a wide range of sectors such as the design, editorial, finance, marketing &amp; publicity, administrative, production and administrative sectors. There are a lot of entry level positions that require little former education and you can also find professional employment in institutions, hospitals and law firms that will accommodate just about any educational level.</p>

          <h3>Health</h3>
          <p>In Bloomsbury you can enjoy some of the best medical treatments and care and if you are interested in pursuing a career in the medical field then you should definitely consider the University College Hospital so you can also help shape the world to be a better and healthier place. The city has an abundance of medical institutions, hospitals and clinics that will provide you with excellent physical and dental care.</p>

          <h3>Transport</h3>
          <p>Bloomsbury is well served by tube and train, with underground stations at,</p>
          <ul>
            <li>Russell Square</li>
            <li>Holborn</li>
            <li>Tottenham Court Road</li>
            <li>Goodge Street</li>
          </ul>
          <p>Euston, King’s Cross/St Pancras and Liverpool Street mainline stations are all nearby.</p>

          <h3>Schools</h3>
          <p>Primary schools in the area include,</p>
          <ul>
            <li>St Joseph’s Primary School</li>
            <li>St George the Martyr Church of England Primary School</li>
          </ul>
          <p>Secondary schools range from the Children's Hospital School at Great Ormond Street and UCH (also a primary school) to The Royal Ballet School.</p>
        </div>
      </div>
    </div>

    <div class="row banner">
      <div class="large-12 column">
        <img src="img/bedroom-full.jpg" alt="Bedford Court Mansions Lounge Banner">
      </div>
    </div>

    <div class="row">
      <div class="large-8 column large-centered contact" id="fourth" data-magellan-target="fourth">
        <h3 class="heading">Do you live in Bedford Court Mansions?</h3>
        <p>To find out how much your property is worth, contact us below for a free valuation.</p>
        <h3><span class="contactSale">Sales</span> &amp; <span class="contactLet">Lettings</span></h3>
        <address>
          <a href="tel:020 7299 3322" class="link">020 7299 3322</a>
          <br>
          <a href="mailto:[email protected]?subject=I would like a free valuation" class="link">[email protected]</a>
        </address>
      </div>
    </div>
  </main>

  <footer>
    <div class="row">
      <div class="large-4 columns large-centered">
        <ul class="social-media-list">
          <li class="social-media-icon">
            <a href="https://www.facebook.com/" target="_blank">
              <img src="img/facebook.svg" alt="Facebook Icon">
            </a>
          </li>
          <li class="social-media-icon">
            <a href="https://twitter.com/" target="_blank">
              <img src="img/twitter.svg" alt="Twitter Icon">
            </a>
          </li>
          <li class="social-media-icon">
            <a href="https://www.youtube.com/user/" target="_blank">
              <img src="img/youtube.svg" alt="Youtube Icon">
            </a>
          </li>
          <li class="social-media-icon">
            <a href="" target="_blank">
              <img src="img/google.svg" alt="Google Plus Icon">
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="large-8 columns large-centered">
        <p class="text-center">copyright 2014 all rights reserved -</p>
        <img src="img/hsc.png" alt="Logo">
      </div>
    </div>
  </footer>

  <script src="js/vendor/jquery.min.js"></script>
  <script src="js/vendor/what-input.min.js"></script>
  <script src="js/foundation.min.js"></script>
  <script src="js/app.js"></script>
  <script src="material-photo-gallery-master/dist/js/material-photo-gallery.js"></script>
  <script>
    var elem = document.querySelector('.m-p-g');
    document.addEventListener('DOMContentLoaded', function () {

      var gallery = new MaterialPhotoGallery(elem);
    });
  </script>
  <script src="https://maps.googleapis.com/maps/api/js"></script>
  <script src="js/google-ini.js"></script>
  <script src="js/scrollTop.js"></script>
</body>

</html>

Siavoush over 3 years ago

I found the issue, it was this this piece of code for the gallery plugin

   <script>
    var elem = document.querySelector('.m-p-g');
    document.addEventListener('DOMContentLoaded', function () {

      var gallery = new MaterialPhotoGallery(elem);
    });
  </script>

Rafi Benkual over 3 years ago

Glad you got it!