Jump to content

Need help including a scroll arrow at the bottom of the first section.

Go to solution Solved by sorca_marian,

Recommended Posts

Posted (edited)

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>

 

Edited by HilBev
grammatical/clarity
Link to comment

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>

 

Link to comment
  • Solution

If you want to scroll to the next section on arrow click, use this code

<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;
    }
}

/* This is optional and makes the scroll effect smooth */
html {
    scroll-behavior : smooth;
}
</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);

            document.querySelector(".scroll-indicator").addEventListener("click", function(event) {
                event.target.closest("section").nextElementSibling.scrollIntoView();
            });
        }
    });
</script>
Link to comment

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.

Link to comment
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

 

Link to comment
  • 2 weeks later...

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? 

Link to comment

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?

Link to comment

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

Link to comment

@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 

Link to comment

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

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.