Sebsemillia
Sebsemillia

Reputation: 9476

How to filter 2 jquery scripts that target hash links

I have two jquery scripts on one page that both target on-site links via href="#example".. One is a content slider the other one is a "smooth scroll" for the "toTop" links.. Now the problem is, every time I hit a link of the content slider navigation, the screen moves up to the top of the container of the slider. I want to avoid that. So I tried to to filter the smooth-scroll script via if-statements, but I had no success so far.. maybe you have any idea? Thank you very much in advance!

Here is the smooth-scroll jquery:

$(document).ready(function() {
$('a[href*=#]').bind("click", function(event) {
    event.preventDefault();
    var ziel = $(this).attr("href");

            if ($.browser.opera) {
                var target = 'html';
            }else{
                var target = 'html,body';
            }

    $(target).animate({
        scrollTop: $(ziel).offset().top
    }, 1000 , function (){location.hash = ziel;});
});
return false;
});

and here the html of the content slider:

<div id="Dienstleistungen">
                        <div class="left_column">
                        <h2>Meine Dienstleistungen</h2>
                        <h3>KOMPETENZEN</h3>
                        <ul id="AboutNav">
                            <li><h1><a href="#Kompetenzen" class="button1 active noScroll" rel="1" title="Frontend Entwicklung | Sebastian B&ouml;hme">&Uuml;berblick</a></h1></li>
                            <li><h1><a href="#Frontend" class="button2 noScroll" rel="2" title="Frontend Entwicklung | Sebastian B&ouml;hme">Frontend Entwicklung</a></h1></li>
                            <li><h1><a href="#CMS" class="button3 noScroll" rel="3" title="Content Management Systeme &amp; Online Shops | Sebastian B&ouml;hme">Content Management Systeme &amp; Online Shops</a></h1></li>
                            <li><h1><a href="#SEO" class="button4 noScroll" rel="4" title="Suchmaschinenoptimierung (SEO) | Sebastian B&ouml;hme">Suchmaschinenoptimierung (SEO)</a></h1></li>
                            <li><h1><a href="#ScreenDesign" class="button5 noScroll" rel="5" title="Screen Design | Sebastian B&ouml;hme">Screen Design</a></h1></li>
                            <li><h1><a href="#Hand" class="button6 noScroll" rel="6" title="Alles aus einer Hand | Sebastian B&ouml;hme">Alles aus einer Hand</a></h1></li>
                        </ul>
                        </div>

                        <div class="container">

                        <div id="Kompetenzen" class="aboutContent right_columns">
                            <h1>&Uuml;berblick</h1>
                            <p>Phasellus..</p>
                        </div>
                    <hr />
                        <div id="Frontend" class="aboutContent right_column ">
                            <h1>Frontend Entwicklung</h1>
                            <p>Phasellus..</p>
                        </div>
                    <hr />  
                        <div id="CMS" class="aboutContent right_column ">
                            <h1>Content Management Systeme &amp; Online Shops</h1>
                            <p>Phasellus..</p>
                        </div>
                    <hr />
                        <div id="SEO" class="aboutContent right_column ">
                            <h1>Suchmaschinenoptimierung (SEO)</h1>
                            <p>Phasellus..</p>
                        </div>
                    <hr />
                        <div id="ScreenDesign" class="aboutContent right_column ">
                            <h1>Screen Design</h1>
                            <p>Phasellus..</p>
                        </div>
                    <hr />
                        <div id="Hand" class="aboutContent right_column">
                            <h1>Alles aus einer Hand</h1>
                            <p>Curabitur..</p>
                        </div>
                        </div><!-- AboutSlider -->
                    </div><!-- Dienstleistungen -->

Upvotes: 0

Views: 1174

Answers (2)

Jonas
Jonas

Reputation: 30

OT: Several H1 in one page - that's bad! Your should not do that in the menu, and in the page it should be H2 instead.

Upvotes: 0

Ivan Hušnjak
Ivan Hušnjak

Reputation: 3503

I see you have class "noScroll" added to your navigation links so you can filter by that: $('a[href*=#]').not('.noScroll')

$(document).ready(function() {
$('a[href*=#]').not('.noScroll').bind("click", function(event) {
    event.preventDefault();
    var ziel = $(this).attr("href");

            if ($.browser.opera) {
                var target = 'html';
            }else{
                var target = 'html,body';
            }

    $(target).animate({
        scrollTop: $(ziel).offset().top
    }, 1000 , function (){location.hash = ziel;});

}); return false; });

Upvotes: 1

Related Questions