Jump to content

Make Button Scroll Down Page?

Recommended Posts

Hi

I am using the Adversary theme for my website and have an indexed home page. I have tried id tagging a block as suggested elsewhere and linking to that id with my button block without success.

When you see my homepage, it is the featured photo with page title and description (which has a button in it). As you scroll down the photo has a parallax effect. I want my 'Learn More' button to simply scroll down to the first page contents, just past the photo.

How can I do this?

Any help is much appreciated, thanks.

Here is the page and button (front and centre) I am referring to: http://www.triggerair.com

Link to comment
  • Replies 8
  • Views 25.9k
  • Created
  • Last Reply

This can be done using an Anchor Link. For reference on creating this kind of link, check out this guide here. Essentially you had the right idea of creating a code block and giving it an id. Once you have done this you need to link to that id using just the id selector and not an entire URL. For instance, if I have a page at the bottom of my index and on this page is the code block id="cupcakes", then the link I will use in the button in my page banner will just be #cupcakes instead of www.domain.com/page-title#cupcakes. The browser will recognize that this id is on the current page and will scroll down to it.

Link to comment

As I understand your question, you want the "Learn More" button under the "Trigger Air Aerial Film and Photography" heading to scroll down to the "Why Use A Drone" heading.

Insert a code block at the top insertion point of the "Why Use A Drone" heading. In the code block enter the following:


<div id="Why-Use-A-Drone"></div>

Then for the href attribute of the Learn More button enter href="#Why-Use-A-Drone". Use this instead of the href="##" that you currently have.

This will cause the Learn More button to scroll down to the "Why Use A Drone" section.

This is, with a bit more specifics, what @justin1024 was telling you in his answer.

Hope this helps.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

It looks like you've put the

<h3 id="top">About Us</h3>

in a code block. As an experiment, try putting this in the code block:`

About Us

`Change the Learn More button's href to href="About-Us" (just in case "top" is used as an id elsewhere; probably not but you know "About-Us" won't be).

It's a guess. It may not work but it's the thing I would try.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

After leaving the above comment I did what I should have done before -- try your way out on my site, Bedford. I did that -- just putting the h3 directly inside the code block with the id on it -- and it worked perfectly. So, I expect trying it my suggested way will not improve things.

I wonder if the parallax feature has something to do with it. Bedford is not a parallax template.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

Archived

This topic is now archived and is closed to further replies.

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