[Benjamin LParticipant]

Theme: X version 1.7.4

I have a single page HTML . I have revoution slider on the first page, on which i have used scroll button ( Image with Down Arrow inside a circle. I need to have this button on all the pages to scroll to next pages, currently only the home page has it. But i found it only for the revoution slider. Is there any way to add this button(anchor) to scroll down ?

[SupportMember]

Hi Benjamin,

Can you provide the link to your site so we can check?

Meanwhile, take a time to read this tutorial for one page navigation. The one thing you’ll need is the importance of the ID as your selector. You can actually create a scroll button anywhere else on your page, and use the proper id selector as the link to which you would want to scroll to.

Let me know if that helps you.

Thanks!

[Benjamin LParticipant]

This reply has been marked as private.

[SupportMember]

Hi Benjamin,

I couldn’t find the issue on the site you gave. I can only see an image on the page.

You could actually have the same scroll button on each top of your content bands however you’ll need to manually add those and customize the look. You can copy the code of the scroll button and just change the link to what page it needs to point to.

Thanks!

[Benjamin LParticipant]

This reply has been marked as private.

[ChristianModerator]

You’re welcome Benjamin.

[Alexander MParticipant]

Hi!

I have the same problem.

http://www.beautiful-mind.de

I got so far, that I use icons on my homepage which are an arrow-circle-down each. The icon links to the next section/row of the homepage. It works, but I have two things that I don’t like yet. (I have enabled one page navigation on the homepage.):

1) I would like to have the same arrow-circle icon / button, that you you use in the header slider.

2) I would like the scrolling to be smoothly. At the moment the page “jumps” to the next section.

Thank you!
Alex

[RadModerator]

Hi Alex,

1.) You have to change your icon type from arrow-circle-down to angle-down. Then add btn_scroll_to at your link class attribute.

Example :
<a href="#about" class="btn_scroll_to">[icon type="angle-down"]</a>

Then add this css at your customizer’s custom css.

.btn_scroll_to {
display: inline-block;
border: 3px solid white;
width: 60px;
height: 60px;
font-size: 41px;
line-height: 53px;
text-align: center;
color: #000000;
border-radius: 100em;
}

2.) Add this javascript at your customizer’s custom javascript

jQuery(function($){
  $('a.btn_scroll_to').click(function(e){
    e.preventDefault();
   
    $('html,body').animate({
      scrollTop: $('#' + $(this).attr('href').split("#").slice(-1)[0] ).offset().top - $('.x-navbar').height()
    },700 ,'swing');
  });
});

Hope this helps.

[davidwalshParticipant]

Hi there,

Has there been an update to this?

I’ve added this to Integrity and it’s definitely not working smoothly at all.

David
—

[JadeModerator]

Hi David,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[Author]

Posts