Smooth Scrolling without Anchors and with Image-Mapped Nav Bar

Question

This really should not be that hard. For my site, I am using a PNG that has been mapped as my navigation bar, with 7 links on it. The nav bar is fixed around the top middle of the page. The site is a single page with 7 sections, all 2000px high. I would very much like to have my page smooth-scroll when one of the nav links is clicked, but so far I am finding this impossible to do. All jquery smooth scroll scripts involve anchors, which I am unable to put within an image-map.

<div class='navbar-cont'>
        <div class ='navbar'>
            <img src='NavBar.png' alt ='Navigation Bar' width="619" height="48" usemap="#NavMap"/>
            <map id="NavMap" name="NavMap">
                <area shape ="rect" coords ="1,0,70,48" href="#" alt="Home"/>
                <area shape ="rect" coords ="76,0,150,48" href="#News" alt="News"/>
                <area shape ="rect" coords ="158,0,264,48" href="#AboutUs" alt="About Us"/>
                <area shape ="rect" coords ="270,0,370,48" href="#Contact" alt="Contact"/>
                <area shape ="rect" coords ="375,0,450,48" href="#Music" alt="Music"/>
                <area shape ="rect" coords ="455,0,550,48" href="#Photos" alt="Photos"/>
                <area shape ="rect" coords ="555,0,615,48" href="#Links" alt="Links"/>
            </map>
        </div>

As you can see, there is no where to put an "a" tag in the map. If I put it before "area" the links no longer are clickable. I am unable to put it before "href" within the "area" tag because that just doesn't work. Without anchors, every jquery script will not work as far as I can tell.

Is there seriously no other way to have smooth scrolling without Javascript? This is an extremely simple task that seems to have an extraordinary amount of convoluted "solutions".

Please do not bother posting any smooth scroll scripts you can find, I have literally tested about 15 of them with no success.

This is currently my script section:

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
        $("#homeButton").click(function() {
$('html, body').animate({
scrollTop: 0 }, 1000);
});

        $("#newsButton").click(function() {
$('html, body').animate({
scrollTop: $("#News").offset().top
}, 2000);
});

        $("#aboutButton").click(function() {
$('html, body').animate({
scrollTop: $("#AboutUs").offset().top
}, 2000);
});

        $("#contactButton").click(function() {
$('html, body').animate({
scrollTop: $("#Contact").offset().top
}, 2000);
});

        $("#musicButton").click(function() {
$('html, body').animate({
scrollTop: $("#Music").offset().top
}, 2000);
});

        $("#photosButton").click(function() {
$('html, body').animate({
scrollTop: $("#Photos").offset().top
}, 2000);
});

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

I have done that, and the ReferenceError has now returned. The smooth scroll works perfectly in Netbeans and not at all in a browser. — Manna Frost, Aug 20 '14 at 16:02
@antithesis I'm not entirely sure what I'm supposed to do with that. Placing it within the script tag for the homeButton does nothing and gives a syntax error, and it is unable to be placed around all of my script. Please explain. — Manna Frost, Aug 20 '14 at 16:18
I have solved the ReferenceError issue: "HTTP:" needed to be inserted into the jquery CDN address in order to work in a browser. Does this need to be removed when the site is public? — Manna Frost, Aug 20 '14 at 16:37

score 0 · Answer 1 · answered Aug 20 '14 at 13:53

I believe javascript won't allow simple smooth scroll, but html transition will certainly :) There is plenty of good tutorial on animation/transition with HTML5.

BTW, i bookmarked something to look at it later, maybe it can do it well : http://mynameismatthieu.com/WOW/

tgogos · Accepted Answer · 2014-08-20T16:22:13.213

0

The basic idea is something like this:
Add ids to your <area> tags

<area id="newsButton" shape="rect" coords="76,0,150,48" href="#News" alt="News" />

and then use a little bit of jQuery:

$(document).ready(function () {
  $("#newsButton").click(function() {
    $('html, body').animate({
      scrollTop: $("#News").offset().top
    }, 2000);
  });
});

See a small demo here: jsFiddle

In more detail:
Add jquery within the <head></head> section. Then use the following code just before you close your </body> tag:

<script type="text/javascript">
$(document).ready(function () {
    $("#homeButton").click(function () {
        $('html, body').animate({
            scrollTop: 0
        }, 2000);
    });
    $("#newsButton").click(function () {
        $('html, body').animate({
            scrollTop: $("#News").offset().top
        }, 2000);
    });
    $("#aboutButton").click(function () {
        $('html, body').animate({
            scrollTop: $("#AboutUs").offset().top
        }, 2000);
    });
    $("#contactButton").click(function () {
        $('html, body').animate({
            scrollTop: $("#Contact").offset().top
        }, 2000);
    });
    $("#musicButton").click(function () {
        $('html, body').animate({
            scrollTop: $("#Music").offset().top
        }, 2000);
    });
    $("#photosButton").click(function () {
        $('html, body').animate({
            scrollTop: $("#Photos").offset().top
        }, 2000);
    });
    $("#linksButton").click(function () {
        $('html, body').animate({
            scrollTop: $("#Links").offset().top
        }, 2000);
    });
});
</script>

edited Aug 20 '14 at 16:22

answered Aug 20 '14 at 14:12

tgogos

23,218
20
96
128

Very interesting, I will get back to you on that. Does each individual link need that bit of jQuery to work, just with the "#newsButton" and "#News" changed out? – Manna Frost Aug 20 '14 at 14:20
That seems to have partially solved the issue. Oddly, the scrolling works on every link except the one that returns to the top "Home" link. That one just jumps abruptly. Also, the scrolling works well in my IDE (Netbeans) but when I try to open it in a browser (Firefox or Chrome) it does not. Any ideas? – Manna Frost Aug 20 '14 at 14:41
For the "Home" link I kept the same approach (see the updated [jsfiddle](http://jsfiddle.net/1s9a1wan/2/)). You will have to hide some part of the navigation bar to see the effect. – tgogos Aug 20 '14 at 14:57
In your jsfiddle the link to the top abruptly jumps without the smooth scroll, similar to what mine is doing – Manna Frost Aug 20 '14 at 15:03
Nevermind - the updated one is working, but mine still won't run in a browser – Manna Frost Aug 20 '14 at 15:16
Have you imported jQuery successfully? Any console errors from your browser? – tgogos Aug 20 '14 at 15:18
Firefox is throwing "ReferenceError: $ is not defined". I've seen that replacing the $ with "jQuery" can help but I tried with no success – Manna Frost Aug 20 '14 at 15:25
Check if [this](http://stackoverflow.com/questions/22268881/referenceerror-is-not-defined) is your case. – tgogos Aug 20 '14 at 15:30
I have updated my post to include the first few lines of my script section. Currently, it appears "$" is now defined but no scrolling is happening in my IDE or browsers. – Manna Frost Aug 20 '14 at 15:45
I have updated my code above to what you suggested. The scrolling works perfectly in Netbeans, but Firefox is still giving a single "$ is not defined" error. – Manna Frost Aug 20 '14 at 16:30

Smooth Scrolling without Anchors and with Image-Mapped Nav Bar

2 Answers2