Jump to content

joaquins

Member
  • Posts

    2
  • Joined

  • Last visited

joaquins's Achievements

  1. @bangank36 Thanks! Just tried this and it's looking the same – the anchor link only appears on the first section, none of the others have any anchors appearing.
  2. Hello, I am trying to create 3 scroll anchor links to link to the next section on a specific page. I am using the following code and injecting it into the page header, but it only creates the anchor link from section 1 to 2, could someone help me figure out how to link section 2 to section 3 and from section 3 to back to top? <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(function() { $("#page>article>section:first-child").append('<a href="#" class="next-section"><i class="fa fa-angle-down" aria-hidden="true"></i></a>'); $('a.next-section').on('click', function(e) { e.preventDefault(); $('html, body').animate({ scrollTop: $(" #page>article>section:first-child").next().offset().top}, 500, 'linear'); }); }); </script> <style> article>section:first-child a.next-section { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 2; display: inline-block; color: #fff; font : normal 400 20px/1 'Josefin Sans', sans-serif; letter-spacing: .1em; text-decoration: none; transition: opacity .3s; animation: fade_move_down 4s ease-in-out infinite; background-color: rgba(0,0,0,0.5); width: 150px; padding-bottom: 20px; text-align: center; font-size: 50px; } </style> Many thanks!
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.