jQuery ScrollTo ne fonctionne pas dans Chrome

Je suis en création d'un site web avec défilement horizontal. Je suis en utilisant cette plugin jQuery pour le défilement automatique. Ci-dessous est le code.

HTML

<head>
<link type="text/css" rel="stylesheet" href="stylesheets/styles.css" />

<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>

<div id="container">

<div id="navigation">
    <ul>
        <li>
            <div class="menubutton" id="homeLink"><a class="menuitem" href="#"></a></div>
        </li>
        <li>
            <div class="menubutton" id="aboutLink"><a class="menuitem" href="#"></a></div>
        </li>
        <li>
            <div class="menubutton" id="musicLink"><a class="menuitem" href="#"></a></div>
        </li>
    </ul>
</div><!-- end of navigation -->


<div id="firstMark"></div>

<div id="secondMark"></div>

<div id="thirdMark"></div>

</div>

</body>
</html>

CSS

@charset "utf-8";

ul li { list-style-type:none; }

/* navigation */
#navigation { position:fixed; z-index:5; bottom:80px; left:-26px; background-color:#FFF; width:70px; height:190px; border-top-right-radius:10px; border-bottom-right-radius:10px; }

.menubutton { float:left; width:20px; height:20px; border-radius: 50%; background-color:#F00; margin-bottom:15px; }

.menubutton:hover { cursor:pointer; }

#homeLink { background-color:#007FD2; }
#aboutLink { background-color:#C7007A; }
#musicLink { background-color:#FFDB1A; }
#brandsLink { background-color:#000; }
#contactLink { background-color:#F90; }

#homeLink:hover { background-color:#006DB4; }
#aboutLink:hover { background-color:#99005E; }
#musicLink:hover { background-color:#FFC61A; }
#brandsLink:hover { background-color:#333; }
#contactLink:hover { background-color:#F60; }


#container {
    position:absolute;
    width:10000px;
    height:100%;
    background-color:#FFC;  
    top:0;
    left:0;
}

#firstMark {
    position:absolute;
    width:1px;
    height:1px;
    left:3000px;    
}

#secondMark {
    position:absolute;
    width:1px;
    height:1px;
    left:6000px;    
}

#thirdMark {
    position:absolute;
    width:1px;
    height:1px;
    left:9000px;    
}

JavaScript

$(document).ready(function(e) {

    $('#homeLink').click(function(e) {
        e.preventDefault();
        $.scrollTo(0,0, {duration: 2000});
    });

    $('#aboutLink').click(function(e) {
        e.preventDefault();
        $.scrollTo('#firstMark', {duration: 2000});
    });

    $('#musicLink').click(function(e) {
        e.preventDefault();
        $.scrollTo('#secondMark', {duration: 2000});
    });

});

Voici la lien à une page de démonstration. Cela fonctionne dans Firefox(v18), Opéra(v12), Safari(v5.1.2) et même sur Internet Explorer 9, mais il ne fonctionne pas sous Chrome(v24).

Quelqu'un peut-il me dire ce qui manque ici? Il quelque chose de mal avec mon code ou un bug dans le plugin?

À défaut, s'il vous plaît dites-moi si il y a d'autres alternatives pour le défilement automatique qui prend également en charge le défilement horizontal.

Merci.

Il est intéressant de noter, StackOverflow utilise le obsolète ScrollTo dans le chat, ce qui signifie que chaque fois que quelqu'un parle, la totalité de l'écran défile de haut.

OriginalL'auteur Isuru | 2013-01-27

4

Une vieille question, mais je vais l'écrire en bas de mon expérience.
J'ai eu le même problème avec ce plugin téléchargé à partir de http://flesler.blogspot.com/2007/10/jqueryscrollto.html

Que plugin dans l'article est obsolète, vous pouvez télécharger la dernière version ici: https://github.com/flesler

Vous aussi, vous allez également avoir à changer

$.scrollTo(0,0, {duration: 2000});

à

$.scrollTo("0px","0px", {duration: 2000});

OriginalL'auteur Emad
2

Votre point d'ancrage peut être la réception de la click événement plutôt que de la div.

Juste de donner à ceci un essai rapide:
```
$('#homeLink a').click(function(e) {
    e.preventDefault();
    alert('click');
    $.scrollTo(0,0, {duration: 2000});
});
```
J'ai ajouté un alert('click') en tant que bien de sorte que vous pouvez dire si c'est détecté.

Essayé. Cela n'a pas fonctionné non plus. Ce faisant également désactive le défilement dans les autres navigateurs aussi bien.
a l'alerte le cadre de travail?
Oui, c'est trop. Aucune alerte n'est venu.
Qui suggère qu'il ya un problème avec votre ciblage.
Mais cela fonctionne dans d'autres navigateurs. Ce problème se produit uniquement dans Chrome

OriginalL'auteur diggersworld
1

Essayez d'utiliser px de défilement de la valeur

Changement
```
 $.scrollTo(0,0, {duration: 2000});
```
à
```
 $.scrollTo(0px,0px, {duration: 2000});
```
la durée est un élément de temps (en secondes).
c'est mieux, peut nécessiter des devis maintenant.
est droit. Mais ce que la ligne n'est-elle défile pour le début. Je veux d'autres liens à travailler ainsi.

OriginalL'auteur Adil

Le bug est dans webkit capacité à animer le corps. Au lieu de cela, créer une div juste à l'intérieur du corps et de l'appliquer à l'animation de ce lieu...

<body>
    <div class="wrapper">
        <nav>
            <a class="scroll-to-id" href="#" data-target="section1">Section 1</a>
            <a class="scroll-to-id" href="#" data-target="section2">Section 2</a>
        </nav>
        <section>
            <a id="section1">&nbsp;</a>
            <p>Some content<p>
        </section>
        <section>
            <a id="section2">&nbsp;</a>
            <p>Some more content<p>
        </section>
    </div>
</body>

Remarque: Dans mon expérience personnelle, l'ID pourrait être tout aussi efficacement appliquée à la balise au lieu d'un redondant et ce encore du travail ... je ne l'ai fait de cette façon dans cet exemple parce que certains utilisateurs ont noté des problèmes avec le ciblage de l'IDs le plus haut dans l'arborescence du DOM que cela ... je ne pouvais pas personnellement recréer ce problème, donc bon, de toute façon marche!

Puis le style de l'élément wrapper et corps à se comporter correctement

body { position:relative; }

.wrapper { overflow:auto; position:absolute; top:0; height:100%; width:100%; }

Alors le jQuery

$('.scroll-to-id').on('click', function(event) {
    event.preventDefault();
    var target = "#" + $(this).data('target');
    $('.wrapper').animate({
        scrollTop: $(target).offset().top
    }, 1500);
});

OriginalL'auteur BenLeah

Vous devez vous connecter pour publier un commentaire.