Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Sign in to follow this  
Akermay

Make Button Scroll Down Page?

Question

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

Edited by Akermay
Added website address.

Share this post


Link to post

8 answers to this question

Recommended Posts

  • 0

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.

Share this post


Link to post
  • 0

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.

Edited by alxfyv
typo

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.

Share this post


Link to post
  • 0

Hi, thanks. But I actually want to scroll to the very first paragraph above the showreel, directly below the feature image. However when I put an id to scroll to it tries to scroll but just bounces back up.

Share this post


Link to post
  • 0

Hi, thanks. But I actually want to scroll to the very first paragraph above the showreel, directly below the feature image. However when I put an id to scroll to it tries to scroll but just bounces back up.

Share this post


Link to post
  • 0

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.

Edited by alxfyv

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post

Create an account or sign in to comment

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

Sign in to follow this  

×
×
  • Create New...