CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Christopher John
Christopher John

Reputation: 75

Using jQuery in navigation when link is clicked - go to target page, then scroll to a specific section of page

Ok, so I have been looking round on here and have seen some similar questions posted, but can't understand the answers in relation to the problem that I have. So apologies if this is duplicating a question someone else has posted.

The problem I have;

I have a multi-page site that I am building on the Concrete5 platform. I have a few sections - home, products, about & contact.

In the about page there are then 3 sections (who we are, product development & our story) - all of which are styled to be 100vh and fill the screen, these are then scrolled through using a jQuery scroll function that allows for the mouse wheel to be used to scroll up and down(the page scrolls the full 100vh section at a time) - so it has the same effect as this - http://www.bang-olufsen.com/en - it also contains similar 'dots' that can be clicked to scroll up or down. I have used IDs to get this.

What I need is that on the about tab, in the navigation - it has a sub-menu that contains the three section links (currently these all go to the top of the about page).

I have tried this www.example.com/about#our-story etc - this doesnt work as Concrete5 seems to read this as a new page and just shows a blank page that has no content.

So what I need is for the sub-menu link to take the user to about page and then once this is loaded - go and find the relevant section i.e if the user clicked on the 'our-story' link it would go to the about page and then scroll down to the our story section.

Any ideas?

To anyone who can provide the solution, I won't know who you are. If you are looking for payment, I can tell you I don't have money. But what I do have are a very particular set of skills, skills I have acquired over a very short career. Skills that make me very poor as a jQuery developer. If you help me now, that'll be the end of it. But if you don't, I will struggle for the next few hours - maybe days, if you help me I won't, and I will owe you :P

Thanks

Upvotes: 1

Views: 762

Answers (3)

SalmanShariati
SalmanShariati

Reputation: 3893

You can use jQuery Animtion like this :

 <script>
        $(document).ready(function () {
            $("html, body").animate({ scrollTop: $('.MySecondSection').offset().top - 90 }, 2000, function () {
            });
        });

    </script>

Edit :

<script>
                $("#myClickableItem").click(function () {
                    $("html, body").animate({ scrollTop: $('.MySecondSection').offset().top - 90 }, 2000, function () {
                    });
                });
    </script>

-90 is for the height of the Navbar. you can skip or change it.

Edit: 

  $("#myClickableItem").click(function() {
    $("body").animate({
      scrollTop: $('#div2').offset().top
    }, 2000, function() {});
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" style="width:100%;height:500px;float:right;background-color:#ffeeee">
  <span id="myClickableItem" style="cursor:pointer;">Click Me!</span>
</div>
<div id="div2" style="width:100%;height:500px;float:right;background-color:#eeffee">2</div>

Chech the snippet please.

Upvotes: 3

Munawir
Munawir

Reputation: 3356

You need to provide the page extension like www.example.com/about.html#our-story

Upvotes: 0

Dawcars
Dawcars

Reputation: 368

Do you simply need an html link anchor?

Create a link<a href="#anyword">Jump to any place</a>

Then you need a target at the place in the page you want to jump to:

<a name="anyword">Jump to this place</a>

Upvotes: 0

Related Questions