CODEWITHSUNDEEP
jqueryhtmldrop-down-menuresponsive-designscroll
Denver
Denver

Reputation: 105

jQuery scroll to not working

I'm trying to get my site to scroll down when I click on an arrow. It can be viewed here http://www.divisionforty.com/dbarr/

However, for some reason nothing is happening on click. It doesn't work at all. I've tried it on other divs with no better luck.

<script>
    $(function() {
        $('a[href*=#]:not([href=#])').click(function() {
            if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                if (target.length) {
                    $('html,body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            }
        });
    });
</script>

Hopefully someone can help.

Thanks,
Denver

Upvotes: 0

Views: 95

Answers (3)

Johan Karlsson
Johan Karlsson

Reputation: 6476

I've checked your page now and found this out:

Your <a> tag is inside the circlediv and its size is 0x0 pixels, so you can't click it.

Try this instead:

<a href="#article">
    <div id="circlediv">
    </div>
</a>

Secondly, you don't have any element with an id='article', so it doesn't find any element to scroll to.

Upvotes: 0

Amin Jafari
Amin Jafari

Reputation: 7207

that happens because your a tag inside the #circlediv is not visually visible (has width and height equal to zero)!

what you must do is to wrap the #circlediv with the a element, as below:

<div class="upper">         
    <a href="#article">
        <div id="circlediv">
        </div>
    </a>
</div>

Upvotes: 1

Giannis Grivas
Giannis Grivas

Reputation: 3412

I checked your DOM elements and there is no example ul or something. See this example's DOM element in this example with name SmoothPageScroll which has the structure below and you have to make something like this in your site:

<div id="page-wrap">

        <h1 id="top">Smooth Page Scrolling</h1>
        ...
        <ul>
          <li><a href="/examples/SmoothPageScroll/#two">Scroll to Section Two</a></li>
          <li><a href="#three">Scroll to Section Three</a></li>
        </ul>

        <h1 id="one">Section One</h1>       
        ...
        <h1 id="two">Section Two</h1>        
        ...
        <p><a href="#top">Top</a></p>

    </div>

Upvotes: 0

Related Questions