Scroll Down Button

Homepage Community Forums Aspire Theme Support Scroll Down Button

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #22248
    egh25
    Customer

      Hello,

      I would like to know how to include a scroll down button on the front page of my website, similar to what you have on the landing page here: https://appfinite.com

      Thank you!

      #22250
      Wes
      Moderator

        Are you talking about the Anchor link?

        If so, you can add the content that you want to link to and assign an ID to that div like this –

        <div id="front-page-2">Sample Content Sample Content Sample Content</div

        Next, create your Anchor like this –

        <a href="#front-page-2">
            <span class="arrow"></span>
        </a>

        You can style it with some CSS if you want the design to look a certain way. There are more jquery effects that you could add, but that would require adding some javascript and/or linking to javascript files hosted online that would provide those effects.

        #22251
        Wes
        Moderator

          Also, I forgot to mention, if you want to link to a specific widget section that already exists on your homepage, then you won’t need to create the first part since it already exists. You would only need to create the Anchor and link it to the section you want it to jump to.

          Let me know if that helps.

          #22255
          egh25
          Customer

            Hi Wes,

            Where do I add that anchor link code? I added it under widgets Front Page 1 as custom HTML, but nothing came up?

            Thank you!

            #22261
            Wes
            Moderator

              Are you referring to the first Link (the arrow on my site)? Which location did you plan to have that added in?

              Next, which part of your site did you want that to link to? Front-Page-2, 3, 4?

              #22264
              egh25
              Customer

                Hi Wes,

                Yes, that’s right. I’m referring to the first arrow right below “View Themes” and “Hire Us”. I would like it to go to front-page 3

                #22265
                Wes
                Moderator
                  This reply has been marked as private.
                  #22266
                  egh25
                  Customer

                    Hi Wes,

                    Thank you- the arrow design is perfect.

                    However, I haven’t been able to figure out where to add the Arrow with circle border and the CSS. Is it under editor -> style.css?

                    #22267
                    Wes
                    Moderator

                      You can add the arrow code inside your widget section (wherever you want it to appear on your homepage)

                      Add the CSS inside your style.css file or you can add it in your Custom CSS page. Go to – Appearance > Customize > Additional CSS

                      #22270
                      egh25
                      Customer

                        Hi Wes,

                        Thank you, everything is appearing now. One more thing: in the widget, the arrow appears very high at the top. I tried moving it down using top: 250px but the arrow gets cut off. In other words, the arrow is in the center of the page, but only half of it appears. If I move it further down it completely disappears.

                        How can I get the arrow at the bottom of the front-page 1 widget?

                        #22272
                        egh25
                        Customer

                          Hi Wes,

                          I was able to get it by adding multiple text widgets in front-page 1 with the div code. Thank you!

                          #22277
                          Wes
                          Moderator

                            Sounds good. Let us know if you need anything.

                          Viewing 12 posts - 1 through 12 (of 12 total)
                          • The topic ‘Scroll Down Button’ is closed to new replies.