page jump in Chrome and Opera with jquery
I have a content slider script that works fine for me in FF, IE and Safari, but not in Chrome and Opera.
When I click on the link in the content navigation, the page jumps up to the next parent div. This just happens in Chrome and Opera.
Any Idea what the problem might be?
here is the script code:
$(document).ready(function (){
var itemCount = $('.container div').size();
var itemWidth = $('.container div').width();
$('.container').wrap('<div id="AboutSlider"></div>');
$('#AboutSlider').css({'width':'640px', 'overflow':'hidden', 'position':'relative', 'height':'400px'});
$('#AboutSlider .container').css({'width':itemCount*itemWidth+'px', 'position':'absolute', 'height':'400px'});
$('.container .aboutContent').css({'padding-left':'0px'});
$('#AboutSlider .aboutContent').css({'width':'640px', 'float':'left', 'min-height':'400px'});
$('#AboutNav a').click(function (event) {
// get the scroll top position
var top = $(window).scrollTop();
event.preventDefault();
$(this).attr('href', $(this).attr('href') + ' ');
var integer = $(this).attr("rel");
$('#AboutSlider .container').animate({
left: -640 * (parseInt(integer) - 1)
})
$('#AboutNav a').each(function () {
$(this).removeClass('active');
if ($(this).hasClass('button' + integer)) {
$(this).addClass('active')
}
});
document.location.hash = $(this).attr("href");
// set the scroll top position to its previous value
setTimeout(function(){$(window).scrollTop(top);},1000);
$(window).scrollTop( top );
});
});
and here the slider html bit:
<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="butt开发者_JAVA百科on2 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 in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.
</p>
<p>Teng sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.
</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 -->
Try changing the click
handler for the nav to this:
$('#AboutNav a').click(function (event) {
// get the scroll top position
var top = $(window).scrollTop();
event.preventDefault();
$(this).attr('href', $(this).attr('href') + ' ');
var integer = $(this).attr("rel");
$('#AboutSlider .container').animate({
left: -640 * (parseInt(integer) - 1)
})
$('#AboutNav a').each(function () {
$(this).removeClass('active');
if ($(this).hasClass('button' + integer)) {
$(this).addClass('active')
}
});
document.location.hash = $(this).attr("href");
// set the scroll top position to its previous value
$(window).scrollTop( top );
});
It grabs the scrollTop
position of the window
at the beginning, then sets it after you update the hash. Not sure if it will work, but worth a try.
精彩评论