fixed navigation- scroll to certain div or ID

Question

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:

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;
        });
    });

Yes I tried this (with and without scrolling). And I am not sure why this isn't working. Maybe because the navigation is fixed at the top of the page? — Keith, Aug 23 '13 at 19:27
" $("html, body").animate({ scrollTop: 0 }, "fast");" try sth like this to scroll to the top on click — theshadowmonkey, Aug 23 '13 at 19:28
@Keith Make sure your contact form isn't fixed then. In case the scrollbar is not from `body`, but from a child element, make sure you scroll that element instead. The anchor tag should always work, no matter if it needs to scroll left, right, up or down... unless it is already in view ;-) — Sumurai8, Aug 23 '13 at 19:34
when you click on "contact" a slidetoggle appears, so it works, but it just doesn't shoot the user up to the top of the page where it sits — Keith, Aug 23 '13 at 19:36
Yes: TypeError: $(...).offset(...) is null $(window).scrollTop($("#uptop").offset().top); — Keith, Aug 23 '13 at 20:15

Sumurai8 · Accepted Answer · 2013-08-23T20:17:44.817

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;
    });

What do you mean with "being used elsewhere"? You currently link to `#`. You can have both an onclick handler and a link. If the onclick handler doesn't cancel the default event (`e.preventDefault()` or `return false`), it should still go to the link. — Sumurai8, Aug 23 '13 at 19:40
I've made an edit. Could you provide the code of the onclick handler that is attached to the `a` with id `toggle3`? — Sumurai8, Aug 23 '13 at 20:08
OK I added a simple div tag with an href and the id="uptop" and it works, everything, but when I add the href in my navigation, say

Richard · Answer 2 · 2013-08-23T19:51:05.833

1

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.

edited Aug 23 '13 at 19:51

answered Aug 23 '13 at 19:29

Richard

6,215
4
33
48

this works but it breaks up the other javascript being run on the page. I have a newsticker that I'm using and when I insert this into the page, it breaks up the news ticker – Keith Aug 23 '13 at 19:34
The news ticker stops and shows all three lines of text instead of rotating through 1 – Keith Aug 23 '13 at 19:37
those codes work, but what it does it break up the news ticker, let me add it and let you see, 1 sec – Keith Aug 23 '13 at 19:46
Yeah it's working there, but not in my screen lol... so frustrating, I appreciate your help. I will just have to keep trying. That code, everytime I input it breaks up the other javacode in the page. – Keith Aug 23 '13 at 20:01

fixed navigation- scroll to certain div or ID

2 Answers2