Reputation: 9476
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öhme">Überblick</a></h1></li>
<li><h1><a href="#Frontend" class="button2 noScroll" rel="2" title="Frontend Entwicklung | Sebastian Böhme">Frontend Entwicklung</a></h1></li>
<li><h1><a href="#CMS" class="button3 noScroll" rel="3" title="Content Management Systeme & Online Shops | Sebastian Böhme">Content Management Systeme & Online Shops</a></h1></li>
<li><h1><a href="#SEO" class="button4 noScroll" rel="4" title="Suchmaschinenoptimierung (SEO) | Sebastian Böhme">Suchmaschinenoptimierung (SEO)</a></h1></li>
<li><h1><a href="#ScreenDesign" class="button5 noScroll" rel="5" title="Screen Design | Sebastian Böhme">Screen Design</a></h1></li>
<li><h1><a href="#Hand" class="button6 noScroll" rel="6" title="Alles aus einer Hand | Sebastian Böhme">Alles aus einer Hand</a></h1></li>
</ul>
</div>
<div class="container">
<div id="Kompetenzen" class="aboutContent right_columns">
<h1>Ü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 & 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
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
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