Hi all - I'm relatively new to SquareSpace and custom code, but not totally new to coding. I need help getting a scroll arrow to show at the bottom of just the first section of my home page, kind of like what is here: http://steven-banks.com 

I've gotten some help from other threads, which has enabled me to add an arrow, but it sits at the location where the code block is. This is an issue because the first section is a full-page background pic and I can therefore not make it so there are blocks flush with the bottom edge of the section.

I also was able to have ChatGPT help me edit the code to show at the bottom middle of the browser. However, in that case, the arrow appeared constantly when on the Home page, regardless of whether you scrolled past the first section.

I have tweaked the code further, as shown below, after using the chrome plugin squarespace section ID finder. However, when I add the below as a code block into that section, it still does not seem to show. I've tried adding it as a code block as well as via code injection (java in the footer and CSS in the header).

Any help would be appreciated! My site is hilfens.com (pw: forum)

<div id="scroll-indicator-container"></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  var sectionId = '66319282b9d6fa4e9f9a8320';
  var section = document.getElementById(sectionId);
  if (section) {
    var bottomDiv = document.createElement('div');
    bottomDiv.className = 'bottom';
    bottomDiv.innerHTML = `
      <a class="scroll-indicator"></a>
    `;
    section.appendChild(bottomDiv);
  }
});
</script>

<style>
.section {
    position: relative;
}

.bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}

.scroll-indicator {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: 16px auto;
    border-right: 2px solid #FFF;
    border-bottom: 2px solid #FFF;
    border-bottom-right-radius: 2px;
    transform: rotate(45deg);
    animation: fade 2s infinite linear;
}

@keyframes fade {
    0% {
        transform: rotate(45deg);
        opacity: 1;
    }
    75% {
        transform: rotate(45deg) translateY(-6px) translateX(-6px);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
</style>

Hi @HilBev,

I updated your code and you can add the below code in the page header code injection of the page.

<style>
#sections > :first-child {
    position: relative;
}

.bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}

.scroll-indicator {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: 16px auto;
    border-right: 2px solid #FFF;
    border-bottom: 2px solid #FFF;
    border-bottom-right-radius: 2px;
    transform: rotate(45deg);
    animation: fade 2s infinite linear;
}

@keyframes fade {
    0% {
        transform: rotate(45deg);
        opacity: 1;
    }
    75% {
        transform: rotate(45deg) translateY(-6px) translateX(-6px);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var section = document.querySelector("#sections > :first-child")
        if (section) {
            var bottomDiv = document.createElement('div');
            bottomDiv.className = 'bottom';
            bottomDiv.innerHTML = `
                <a class="scroll-indicator"></a>
            `;
            section.appendChild(bottomDiv);
        }
    });
</script>

Thank you! Is it possible to just have this appear on the home page, though? The other pages don't/won't have a full-screen background image at the top, so it's less necessary for those pages.

38 minutes ago, sorca_marian said:

you can add the below code in the page header code injection of the page

Sure, just add it in the page you want on Page settings -> Advanced > Code injection

4:21 in the below video

Sorry - read your first post too fast.

You're amazing - thank you!!

Hi,

I want to add this same arrow to several of the sections on my page. I have experimented with adding a code block directly into the sections and using "nth child" but for some reason this then makes them all go to the same section instead of simply the next section. Anyway to amend this code so it can be used in several sections on the same page, each going to the next section? 

Hi @Gmm398,

The current code, when clicking the arrow, it goes to the next section from where the arrow is.
Can you share a link to the page you want to add it? On what section would you like it to appear and on what section should it go on click?

I need arrows on 3 sections on the homepage (including the first) and they all click to the next section. Nothing complicated. I have tried adding a code block to each section with code instead of in page header, but still doesn't work. I'm assuming it is because the code says ':first-child' .

Each section here, including the first, should have an arrow clicking to the next section after it.

For some reason the code isn't working to make the arrow jump to the next section when I view the page in a browser, only seems to work in the Squarespace workspace?

https://goldfish-gazelle-bac3.squarespace.com/
password: DISTILLE

@Gmm398,

Try using this JavaScript code placed in the page header code injection

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var section = document.querySelector("#sections > :first-child")
        if (section) {
            var bottomDiv = document.createElement('div');
            bottomDiv.className = 'bottom';
            bottomDiv.innerHTML = `
                <a class="scroll-indicator"></a>
            `;
            section.appendChild(bottomDiv);

            section.querySelector(".scroll-indicator").addEventListener("click", function(event) {
                event.target.closest("section").nextElementSibling.scrollIntoView();
            });
        }

        var section2 = document.querySelector("#sections > :nth-child(2)");
        if (section2) {
            var bottomDiv2 = document.createElement('div');
            bottomDiv2.className = 'bottom';
            bottomDiv2.innerHTML = `
                <a class="scroll-indicator"></a>
            `;
            section2.appendChild(bottomDiv2);

            section2.querySelector(".scroll-indicator").addEventListener("click", function(event) {
                event.target.closest("section").nextElementSibling.scrollIntoView();
            });
        }


        var section3 = document.querySelector("#sections > :nth-child(3)");
        if (section3) {
            var bottomDiv2 = document.createElement('div');
            bottomDiv2.className = 'bottom';
            bottomDiv2.innerHTML = `
                <a class="scroll-indicator"></a>
            `;
            section3.appendChild(bottomDiv2);

            section3.querySelector(".scroll-indicator").addEventListener("click", function(event) {
                event.target.closest("section").nextElementSibling.scrollIntoView();
            });
        }

    });
</script>

The parts with :nth-child(2) and :nth-child(3) is that they are specifying the number of the sections and you can update the number to your sections number.
This means that the arrows will be added on section nr. 2 of the page and section nr.3 

thanks this works great!

although for some reason the first arrow still does not click to the next section when the site is full screen, I do not know why.

I just checked the page and both arrows work.
With the current CSS code, the layout of the arrow is rotated and you need to click it on that area to activate the scroll

You are right. I was on my old laptop which cannot be trusted. On my desktop it works great. Thanks so much. Will keep you in mind for some future work I may need, I see you've for got your contact info on there.