joeshmoe

I am using anchor links to create links to various page sections. In the header menu, I created a folder with drop down links to sub-pages. I also want the folder to be clickable and I have it working to a designated page (via injection code provided by Will Myers), but it won't allow me to include the anchor link in the folder URL-slug (ie /page#section_anchor_link-folder/). Is there a way to get this to work or am I better off duplicating that page section as a standalone "not linked" page? 

awesome, thank you!

I'd like specific pages to have a full-screen landing video section. I want this video (or photo in other cases) to fill the entire window of the user. So regardless of the window size the video/photo will adjust so that the first section fills the entire screen (width and height). 

What code injection would I use for this and would I put it in the page header code injection or the design custom CSS setting?

On 3/3/2022 at 10:27 AM, tuanphan said:

Change to this code

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<style>
	[data-section-id="enter id here"] a.next-section {
      padding-top: 70px;
      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;
    }
   [data-section-id="enter id here"] a.next-section span {
      position: absolute;
      top: 0;
      left: 50%;
      width: 24px;
      height: 24px;
      margin-left: -12px;
      border-left: 1px solid #fff;
      border-bottom: 1px solid #fff;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -webkit-animation: sdb05 1.5s infinite;
      animation: sdb05 1.5s infinite;
      box-sizing: border-box;
    }
    @-webkit-keyframes sdb05 {
      0% {
        -webkit-transform: rotate(-45deg) translate(0, 0);
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        -webkit-transform: rotate(-45deg) translate(-20px, 20px);
        opacity: 0;
      }
    }
    @keyframes sdb05 {
      0% {
        transform: rotate(-45deg) translate(0, 0);
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        transform: rotate(-45deg) translate(-20px, 20px);
        opacity: 0;
      }
    }
</style>
<script>
	$(function() {
      $('[data-section-id="enter id here"]').append('<a href="#" class="next-section"><span></span>Scroll</a>');
      $('a.next-section').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: $('[data-section-id="enter id here"]').next().offset().top}, 500, 'linear');
      });
    });
</script>

I used 4 code like this

[data-section-id="enter id here"]

Replace with your data section id, use this tool to find id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

This is great, I have it working on one page and not the others (as intended). What would be the best way to have this appear on additional pages, but still not all pages? I'm new to CSS so apologies if the questions are basic.

Should I copy and paste the entire code multiple times and then use the unique section ids in each code copy? Or is there a way to list multiple section IDs in a single block? 

Or do I only need to copy the script section multiple times?