Question

我有一个内容滑块脚本，适用于FF，IE和Safari，但不适用于Chrome和Opera。

当我点击内容导航中的链接时，页面会跳转到下一个父div。这恰好发生在Chrome和Opera中。

任何想法可能是什么问题？

这是脚本代码：

$(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 );
});

});

这里是滑块html位：

   <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 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 &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 -->

Answer 1

尝试将导航的click处理程序更改为：

$('#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 );
});

它在开头抓取scrollTop的{{1}}位置，然后在更新散列后设置它。不确定它是否有用，但值得一试。

使用jquery在Chrome和Opera中跳转页面

1 个答案: