CODEWITHSUNDEEP
javascriptjquerycss
Keith
Keith

Reputation: 4137

fixed navigation- scroll to certain div or ID

I have a fixed navigation up top:

  <div class="navigation">
      <ul>
         <li><a href="#" id="toggle1" class="contentdown">HOME</a></li>
         <li><a href="#" id="toggle2" class="contentdown">ABOUT</a></li>
         <li class="logo"><img src="images/ogsystemslogo.png" /></li>
         <li>CAREERS</li>
         <li><a href="#" id="toggle3" class="contentdown">CONTACT</a></li>
      </ul>
  </div>

When I click on the "contact" target, it expands a div just above the start of my content area. My problem is this is great if the user is at the top of the page, if the user is say, scrolled down to the middle, the div will still work but the user will not know what is happening as the div isn't in view. My question is how do I get this target to work anywhere on the page where the user can see it? Another way to put it is, if the user is at the bottom of a long page and clicks on the contact button, how do I get the page to shoot up to where the content is so the user can see it?

I have tried this:

  1. added an ID () just under the tag but above the fixed navigation in hopes that the javascript here would work: 

        $("#test").click(function () {
    $('html, body').animate({
        scrollTop: $("#uptop").offset().top
    }, 1000);
});

    but this doesn't work.

I also have this in my script:

        $(document).ready(function () {
        $(this).scrollTop(0);
    });

so that when the page refreshes it shoots up to the top.

Is there a goTo function I could write that would make this work? Since the navigation is being used to open another div, I am not sure if I can link each link to two separate functions.

        <div class="toggle3" style="display: none;">
            <div class="toggle3main">
                <div class="wrapper">
                    <div class="map">
                    </div>

                </div>
            </div>
        </div>

Here is the JS:

    $(function () {
        $('#toggle3').click(function () {
            $('.toggle3').show('1000');
            $('.toggle2').hide('1000');
            $('.toggle1').hide('1000');
            $('.toggle').text('toggle 3 clicked');
            $('.toggle').slideToggle('1000');

            return false;
        });
    });

Upvotes: 1

Views: 798

Answers (2)

Sumurai8
Sumurai8

Reputation: 20745

Simply add an id yourid to your contact div and link to #yourid. The default behaviour of a link will do the rest for you. You can always link top #top instead. This will always link you to the very top of your document (by design; no element with an id top needed).

Side note: I do not understand what you mean with "There is no way for me to use the href# to also to tell it to go to the top of the page". In your question you link to #. This does nothing. You must have an onclick handler that makes 'things' happen. If there is no event.preventDefault() or return false in that onclick handler, it should do the default event of the link too (go to the location defined in href).

Example HTML:

<div class="navigation"><!-- This is fixed -->
  <ul>
    <li><a href="#homediv" id="toggle1" class="contentdown">HOME</a></li>
    <li><a href="#aboutdiv" id="toggle2" class="contentdown">ABOUT</a></li>
    <li class="logo"><img src="images/ogsystemslogo.png" /></li>
    <li>CAREERS</li>
    <li><a href="#contactdiv" id="toggle3" class="contentdown">CONTACT</a></li>
  </ul>
</div>
<div id="contactform"><!-- This is in the normal flow of the document -->
  <!-- The link with id "toggle3" will scroll to this element -->
</div>

Edit: The problem is the return false in your onclick handler. This will prevent the default event. Link to whatever the id is of your contactform and return nothing or return true in your onclick handler:

    $('#toggle3').click(function () {
        $('.toggle3').show('1000');
        $('.toggle2').hide('1000');
        $('.toggle1').hide('1000');
        $('.toggle').text('toggle 3 clicked');
        $('.toggle').slideToggle('1000');

        //Changed below
        return true;
    });

Upvotes: 2

Richard
Richard

Reputation: 6354

Raw Javascript:

var goTo = document.getElementById("uptop").offsetTop;
window.scrollTo(0, goTo);

JQuery:

$(window).scrollTop($("#uptop").offset().top);

Slow Scroll (jQuery UI):

$('html, body').animate({scrollTop: $("#uptop").offset().top}, 2000);

A JSFiddle showing it working.

Upvotes: 1

Related Questions