Sticky sidebar with anchor link navigation in Jasper Jin (7.0)

Site URL: https://www.hannahpark.work/pagecv-1

Hi,

I would like to add a sticky section for anchor links to a long CV page.

There are multiple sections (Education, academic record, etc.) in my one-page CV page, I want to have a section with sticky navigation links that will jump to these sections within the page. 

My website: https://www.hannahpark.work/pagecv-1

Password: 2022

I'm using Jasper Jin and Squarespace version 7.0

I saw that you might be able to do this with Brine template but I would rather not have to change my template.

Thank you!

Hi,

How about adding float anchor links buttons? We will give the code

Hi, 

Yes, I would like the code please.

Would it be possible to have it float on the top? I'm just concerned that the float anchor links on the right might cover the content on mobile version.

Thanks!

On 4/5/2022 at 3:13 AM, tuanphan said:

For anyone interested, just add a Code Block on Page >> Paste this code

<ul class="tp-float-buttons">
        <li><a href="#">Education</a></li>
        <li><a href="#">Record</a></li>
        <li><a href="#">Awards</a></li>
</ul>
<style>
ul.tp-float-buttons {
    position: fixed;
    top: 50%;
    right: 10px;
    z-index: 999;
    list-style: none;
    padding-left: 0;
    margin: 0;
}
ul.tp-float-buttons a {
    color: white;
    background-color: black;
    padding: 10px;
    margin-bottom: 10px !important;
    display: inline-block;
    min-width: 100px;
    text-align: center;
}
</style>

Or you can add a Text Block >> Add links >> Then share url, we will give the code to adjust it

Hummm.. this sounds like a neat idea but this code is not working for me on the Bryant template 7.0. Thoughts? 

16 hours ago, knellans said:

Hummm.. this sounds like a neat idea but this code is not working for me on the Bryant template 7.0. Thoughts? 

 

What is your site url?