Jump Links Example Mvc

 
  1. Drag in a column-100 layout block to your main content area and add the mg-jumplink-sections class to the row. Label it "jumplink sections".
  2. Each jumplink should correspond to one section of content. For each jumplink you're going to have, add one 100% layout block and add the section class to the row in the main content area. You can add additional classes if you need other styles but the section class is what makes the jumplinks work without fooling around with IDs.
    • You can have some lead text before your sections, but make sure it's not in a layout element with the section class.
  3. Add a column-100 layout element to the left column. Add the class jumplink-container to the row, and mg-jumplinks to the column.
  4. Add a content block for your jumplinks. The example uses h4 tags for the sections, and unordered lists for the links themselves. The headers can be h2, h3 or h4, but the links should remain an unordered list for the mobile version of this to work.
    • Just like the section elements in the content area, the jumplinks work by checking an index. So the first link inside the jumplink container will always go to the first section, so make sure you have the same amount of links as sections and that they're in the same order.
  5. You should be able to use the visual/WYSIWYG editor to create your jumplinks, but once you've done that, you'll need to add a little bit of code for the mobile version to work properly. Switch your content block to HTML, and paste this in before the content: 
    <div class="mobile-nav">Content Navigation <button class="jumplink-nav-toggle"></button></div>
     
    Then, paste this after the content: 
    </div>
    You can change "Content Navigation" to whatever you'd like the label of the mobile nav to be, but shouldn't change anything else.
  6. Add a content block (it shouldn't matter where, I'd recommend at the top or bottom of your sections in the main content area) with this code in the HTML screen: 
    <a class="button back-to-top">Back to Top</a>
    This is your "back to top" button. You can change the Back to Top wording or change out the button class for a different color if you like, but the back-to-top class needs to remain.
  7. This is really mainly meant to work with the two-column layout that most of the site uses (I modeled it on the Interior Detail template), but it might work with other things. The spacing is fixed however, so it might not look perfect on other templates. Always test after creating!
  8. I'd recommend against very long lists of jump links; the floating list style might go off the bottom of the screen if your list is too long to fit in the left side of the screen once it's floating. I tested it with up to 10 items and it works mostly, though can tend to overlap the footer if the last section is very short and the list is very long. This seems mostly okay (people who are down at the footer probably are done reading the content) but it's worth keeping in mind.

Item 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales efficitur scelerisque. Morbi nulla lacus, pharetra et ipsum quis, bibendum commodo augue. Sed suscipit vulputate purus elementum dignissim. Morbi in elit a sapien ullamcorper venenatis eu et velit. Cras varius feugiat tellus, at faucibus arcu gravida ac. Praesent massa metus, sollicitudin eu tortor quis, accumsan ullamcorper dui. Aliquam in egestas tellus. Praesent bibendum justo eu ex tincidunt scelerisque.

Aenean maximus lectus a metus ultricies, in gravida ex imperdiet. Mauris facilisis luctus mollis. Ut pretium elit lorem, sit amet scelerisque purus vulputate eget. Pellentesque mattis mi elit, id placerat risus lacinia at. Duis vel ligula metus. Maecenas pulvinar ultricies urna, quis tempor tellus hendrerit et. Ut at nisi in odio efficitur faucibus.

Aenean sit amet porttitor magna. Nam tempor vitae turpis vel rhoncus. Nullam nec leo sed ante eleifend blandit nec id turpis. Nullam quis condimentum orci. Nulla facilisi. Praesent vitae tellus vel lectus consectetur ultrices sit amet mollis augue. Maecenas a dolor vitae turpis pellentesque mollis vitae ac mauris. Nullam auctor ornare lorem eget dictum. Duis pharetra quam a purus varius euismod. Aliquam sit amet metus vel est rutrum laoreet. Vivamus mollis, leo vel tempus tempus, mi risus cursus dolor, ac feugiat lorem arcu nec quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget leo at dolor sagittis interdum non ac nisl. Maecenas sed volutpat erat. Vivamus egestas vitae tellus id semper.

Quisque imperdiet nulla quis ullamcorper sollicitudin. Nam elit libero, accumsan et feugiat vitae, vulputate id massa. Phasellus eget ipsum imperdiet, pellentesque nunc id, porta ex. Duis ut mollis nulla, sit amet ornare sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque libero justo, lacinia vehicula gravida quis, efficitur ac magna. Nulla condimentum, sem interdum vulputate ultricies, quam velit tincidunt nibh, at tempor nulla orci fermentum leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Item 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales efficitur scelerisque. Morbi nulla lacus, pharetra et ipsum quis, bibendum commodo augue. Sed suscipit vulputate purus elementum dignissim. Morbi in elit a sapien ullamcorper venenatis eu et velit. Cras varius feugiat tellus, at faucibus arcu gravida ac. Praesent massa metus, sollicitudin eu tortor quis, accumsan ullamcorper dui. Aliquam in egestas tellus. Praesent bibendum justo eu ex tincidunt scelerisque.

Aenean maximus lectus a metus ultricies, in gravida ex imperdiet. Mauris facilisis luctus mollis. Ut pretium elit lorem, sit amet scelerisque purus vulputate eget. Pellentesque mattis mi elit, id placerat risus lacinia at. Duis vel ligula metus. Maecenas pulvinar ultricies urna, quis tempor tellus hendrerit et. Ut at nisi in odio efficitur faucibus.

Aenean sit amet porttitor magna. Nam tempor vitae turpis vel rhoncus. Nullam nec leo sed ante eleifend blandit nec id turpis. Nullam quis condimentum orci. Nulla facilisi. Praesent vitae tellus vel lectus consectetur ultrices sit amet mollis augue. Maecenas a dolor vitae turpis pellentesque mollis vitae ac mauris. Nullam auctor ornare lorem eget dictum. Duis pharetra quam a purus varius euismod. Aliquam sit amet metus vel est rutrum laoreet. Vivamus mollis, leo vel tempus tempus, mi risus cursus dolor, ac feugiat lorem arcu nec quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget leo at dolor sagittis interdum non ac nisl. Maecenas sed volutpat erat. Vivamus egestas vitae tellus id semper.

Quisque imperdiet nulla quis ullamcorper sollicitudin. Nam elit libero, accumsan et feugiat vitae, vulputate id massa. Phasellus eget ipsum imperdiet, pellentesque nunc id, porta ex. Duis ut mollis nulla, sit amet ornare sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque libero justo, lacinia vehicula gravida quis, efficitur ac magna. Nulla condimentum, sem interdum vulputate ultricies, quam velit tincidunt nibh, at tempor nulla orci fermentum leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Item 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales efficitur scelerisque. Morbi nulla lacus, pharetra et ipsum quis, bibendum commodo augue. Sed suscipit vulputate purus elementum dignissim. Morbi in elit a sapien ullamcorper venenatis eu et velit. Cras varius feugiat tellus, at faucibus arcu gravida ac. Praesent massa metus, sollicitudin eu tortor quis, accumsan ullamcorper dui. Aliquam in egestas tellus. Praesent bibendum justo eu ex tincidunt scelerisque.

Aenean maximus lectus a metus ultricies, in gravida ex imperdiet. Mauris facilisis luctus mollis. Ut pretium elit lorem, sit amet scelerisque purus vulputate eget. Pellentesque mattis mi elit, id placerat risus lacinia at. Duis vel ligula metus. Maecenas pulvinar ultricies urna, quis tempor tellus hendrerit et. Ut at nisi in odio efficitur faucibus.

Aenean sit amet porttitor magna. Nam tempor vitae turpis vel rhoncus. Nullam nec leo sed ante eleifend blandit nec id turpis. Nullam quis condimentum orci. Nulla facilisi. Praesent vitae tellus vel lectus consectetur ultrices sit amet mollis augue. Maecenas a dolor vitae turpis pellentesque mollis vitae ac mauris. Nullam auctor ornare lorem eget dictum. Duis pharetra quam a purus varius euismod. Aliquam sit amet metus vel est rutrum laoreet. Vivamus mollis, leo vel tempus tempus, mi risus cursus dolor, ac feugiat lorem arcu nec quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget leo at dolor sagittis interdum non ac nisl. Maecenas sed volutpat erat. Vivamus egestas vitae tellus id semper.

Quisque imperdiet nulla quis ullamcorper sollicitudin. Nam elit libero, accumsan et feugiat vitae, vulputate id massa. Phasellus eget ipsum imperdiet, pellentesque nunc id, porta ex. Duis ut mollis nulla, sit amet ornare sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque libero justo, lacinia vehicula gravida quis, efficitur ac magna. Nulla condimentum, sem interdum vulputate ultricies, quam velit tincidunt nibh, at tempor nulla orci fermentum leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Item 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales efficitur scelerisque. Morbi nulla lacus, pharetra et ipsum quis, bibendum commodo augue. Sed suscipit vulputate purus elementum dignissim. Morbi in elit a sapien ullamcorper venenatis eu et velit. Cras varius feugiat tellus, at faucibus arcu gravida ac. Praesent massa metus, sollicitudin eu tortor quis, accumsan ullamcorper dui. Aliquam in egestas tellus. Praesent bibendum justo eu ex tincidunt scelerisque.

Aenean maximus lectus a metus ultricies, in gravida ex imperdiet. Mauris facilisis luctus mollis. Ut pretium elit lorem, sit amet scelerisque purus vulputate eget. Pellentesque mattis mi elit, id placerat risus lacinia at. Duis vel ligula metus. Maecenas pulvinar ultricies urna, quis tempor tellus hendrerit et. Ut at nisi in odio efficitur faucibus.

Aenean sit amet porttitor magna. Nam tempor vitae turpis vel rhoncus. Nullam nec leo sed ante eleifend blandit nec id turpis. Nullam quis condimentum orci. Nulla facilisi. Praesent vitae tellus vel lectus consectetur ultrices sit amet mollis augue. Maecenas a dolor vitae turpis pellentesque mollis vitae ac mauris. Nullam auctor ornare lorem eget dictum. Duis pharetra quam a purus varius euismod. Aliquam sit amet metus vel est rutrum laoreet. Vivamus mollis, leo vel tempus tempus, mi risus cursus dolor, ac feugiat lorem arcu nec quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget leo at dolor sagittis interdum non ac nisl. Maecenas sed volutpat erat. Vivamus egestas vitae tellus id semper.

Quisque imperdiet nulla quis ullamcorper sollicitudin. Nam elit libero, accumsan et feugiat vitae, vulputate id massa. Phasellus eget ipsum imperdiet, pellentesque nunc id, porta ex. Duis ut mollis nulla, sit amet ornare sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque libero justo, lacinia vehicula gravida quis, efficitur ac magna. Nulla condimentum, sem interdum vulputate ultricies, quam velit tincidunt nibh, at tempor nulla orci fermentum leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Item 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales efficitur scelerisque. Morbi nulla lacus, pharetra et ipsum quis, bibendum commodo augue. Sed suscipit vulputate purus elementum dignissim. Morbi in elit a sapien ullamcorper venenatis eu et velit. Cras varius feugiat tellus, at faucibus arcu gravida ac. Praesent massa metus, sollicitudin eu tortor quis, accumsan ullamcorper dui. Aliquam in egestas tellus. Praesent bibendum justo eu ex tincidunt scelerisque.

Aenean maximus lectus a metus ultricies, in gravida ex imperdiet. Mauris facilisis luctus mollis. Ut pretium elit lorem, sit amet scelerisque purus vulputate eget. Pellentesque mattis mi elit, id placerat risus lacinia at. Duis vel ligula metus. Maecenas pulvinar ultricies urna, quis tempor tellus hendrerit et. Ut at nisi in odio efficitur faucibus.

Aenean sit amet porttitor magna. Nam tempor vitae turpis vel rhoncus. Nullam nec leo sed ante eleifend blandit nec id turpis. Nullam quis condimentum orci. Nulla facilisi. Praesent vitae tellus vel lectus consectetur ultrices sit amet mollis augue. Maecenas a dolor vitae turpis pellentesque mollis vitae ac mauris. Nullam auctor ornare lorem eget dictum. Duis pharetra quam a purus varius euismod. Aliquam sit amet metus vel est rutrum laoreet. Vivamus mollis, leo vel tempus tempus, mi risus cursus dolor, ac feugiat lorem arcu nec quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget leo at dolor sagittis interdum non ac nisl. Maecenas sed volutpat erat. Vivamus egestas vitae tellus id semper.

Quisque imperdiet nulla quis ullamcorper sollicitudin. Nam elit libero, accumsan et feugiat vitae, vulputate id massa. Phasellus eget ipsum imperdiet, pellentesque nunc id, porta ex. Duis ut mollis nulla, sit amet ornare sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque libero justo, lacinia vehicula gravida quis, efficitur ac magna. Nulla condimentum, sem interdum vulputate ultricies, quam velit tincidunt nibh, at tempor nulla orci fermentum leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.