Jump to content

Scroll Down Arrow That Links To Next Section

Recommended Posts

@tuanphan

I already had that thought, but nothing is happening whatever I change this to. 

in my mind I would need to link not to "next-section" (since the next section is the one not showing, its hidden on desktop) but to the specific section it should jump to. but all combinations of putting in the section ID did not work for me. does that make sense? 

and for getting the arrow into the mobile gallery slideshow I think I'd need to add first AND second child as the location of the arrow. but also here I couldn't figure out what I need to put into the code to make it work.

in summary, I need the arrow in the first AND second section (only one of both is showing at a time) to link to the third section. see screenshots attached 😊

Bildschirmfoto 2024-02-14 um 15.48.29.png

Bildschirmfoto 2024-02-14 um 15.48.40.png

Bildschirmfoto 2024-02-14 um 15.49.00.png

Link to comment

@tuanphan so I think that's where my problem is - the arrow on the first section (portfolio desktop) does not lead to the next section, but the one after that, since the gallery for mobile is squeezed in there but hidden for desktop. which is why I would need the arrow to show up in both the first AND second section (Portfolio desktop + gallery mobile) and BOTH should lead to the third section saying "hi - wir sind.."

adding the "#" didn't change anything, still not jumping to that section. but that might be because its not the next. 

edit: added a screenshot for explanation

Bildschirmfoto 2024-02-20 um 12.31.25.png

Edited by CorinnaR
Link to comment

The script code will make it scroll to next section, but you used code to hide it so it won't work. Adding Code Block like above will fix it. If it doesn't work, you can do 2 steps, then let me know, I can check it again easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 2/29/2024 at 4:02 PM, CorinnaR said:

@tuanphan it works again, you are the best! 

if you can now get the arrow to appear in the hidden second section as well, i will finally shut up in this thread and be forever grateful to you! 😂

If you want to add arrow on both first + second section, you can find this line in all script/style code

#page section:first-child

to this

#page section:nth-child(-n+2)

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...

I have created a video about scrolling to sections with 1 line of code 
 

And for the scroll arrow you can see this post 

 

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.