web-dev-qa-db-fra.com

Faites défiler l'élément vers le haut de la page en cliquant sur l'ancre à l'intérieur de l'élément ou n'importe où à l'intérieur contenant l'identifiant div

Je voudrais faire défiler la page en haut de la page par ex. ID div de navigation lorsque vous cliquez sur l'un des liens à l'intérieur de l'ID div de navigation ou (si possible) lorsque vous cliquez n'importe où dans l'ID div lui-même contenant les liens de navigation.

J'ai fait des recherches sur ce sujet et le plus proche auquel je suis parvenu est jQuery - Comment faire défiler une ancre en haut de la page lorsque vous cliquez dessus? mais pour une raison quelconque, cela ne semble pas fonctionner lorsque j'essaie de le faire ceci dans mon exemple. Qu'est-ce que je fais mal?

Je suis nouveau sur jQuery et medium en html et css (et j'ai utilisé le style en ligne des divs car je ne voulais pas fournir un css séparé juste pour l'exemple).

Quand je charge le HTML et le script de jQuery - Comment faire défiler une ancre en haut de la page lorsque vous cliquez dessus? dans Aptana, il ne défile pas non plus. Même avec un div de contenu au-dessus de la classe div, travaillez de sorte qu'il y ait de l'espace pour faire défiler le tout.

J'ai inclus deux petits paragraphes à l'intérieur des divs concernant pour expliquer exactement ce que je veux dire.

Toute aide est fortement appréciée. Je vous remercie.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
        $('#scroll_navigation ul li').click(function() {
             $('html,body').animate({scrollTop: $(this).offset().top}, 800);
        }); 
    </script>

<body>

<div id="logo" style="margin: 0 auto; height: 300px; width: 60%; border: 1px solid #000">Logo</div>

    <div id="scroll_navigation" style="margin: 0 auto; width: 40%; border: 4px solid #225599">

        <p>Scroll navigation to top of page</p>
        <p>Catch any clicks in "#scroll_navigation" to scroll the div id to the top of the page</p>


            <div id="navigation">

                <div class="container" style="margin: 0 auto; height: 220px; width: 60%; border: 1px solid #000">

                    <ul>
                        <p>Catch clicks on anchors to scroll the div id to the top of the page</p>
                        <li><a href="#Portfolio" title="">Portfolio</a></li>
                        <li><a href="#Services" title="">Services</a></li>
                        <li><a href="#About" title="">About</a></li>
                        <li><a href="#Contact" title="">Contact</a></li>
                    </ul>

                </div>

            </div>

    </div>

<div id="content" style="margin: 0 auto; height: 1500px; width: 60%; border: 1px solid #000">Content</div>

</body>

[~ # ~] modifier [~ # ~] Attention lors de l'utilisation de scrollTop dans Firefox. Animate scrollTop ne fonctionne pas dans FirefoxjQuery scrollTop - pas de prise en charge des valeurs négatives dans Mozilla/Firefox Il m'a fallu un certain temps pour comprendre que mon code allait bien mais scrollTop était ce problème dans FF . Dans ce même exemple, le comportement peut également être observé. Lors du défilement vers le bas et de la fixation des ancres, FF défilera jusqu'à des positions aléatoires de 2 à 4 pixels avant ou après la division cible.

J'utilise maintenant Scrolld.js pour obtenir un défilement parfait des pixels jusqu'aux points souhaités sur les principaux navigateurs. Je ne comprends pas comment différents moteurs de navigateur peuvent rendre une chose aussi courante que scrollTop à partir de différentes entrées (html ou corps) pour autant que je comprends et je suis nouveau sur jQuery. Je suppose que ce n'est pas "la faute" de jQuery mais comment les moteurs de navigation rendent scrollTop.

javascriptjquerycsshtml
18
moderntimes

Je ne sais pas si vous l'avez fait, mais vous devez inclure jquery pour l'utiliser. Une autre chose serait que votre "écouteur de clics" doit être dans une fonction prête pour le document jqueries comme ceci:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>

$(document).ready(function(){
    $('#scroll_navigation ul li').on('click', function(){
        $('html,body').animate({scrollTop: $(this).offset().top}, 800);
    }); 
});  

</script>
36
lexith