web-dev-qa-db-fra.com

Javascript faire défiler jusqu'à div id

J'ai recherché sur google la solution à mon problème, et je ne comprends pas pourquoi le code que j'ai écrit fonctionne pour tous, mais pas pour moi.

J'ai écrit ceci:

<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
        function scrollTo() {
            $('html, body').animate({ scrollTop: $('#div_id').offset().top }, 'slow');
            return false;
        }
    </script>
    <style type="text/css">
        .uno {
            height: 1000px;
            background: #808080;
        }
        .due {
            margin-top: 300px;
            height: 500px;
            background: #ff00ff;
        }
    </style>
</head>
<body>
    <div class="uno" onclick="scrollTo()"> 
        Clicca
    </div>
    <div class="due" id="div_id"></div>
</body>
javascriptjqueryhtmlcss
12
ProtoTyPus
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript">
        function scrollTo() {
            $('html, body').animate({ scrollTop: $('#div_id').offset().top }, 'slow');
            return false;
        }
    </script>
    <style type="text/css">
        .uno {
            height: 1000px;
            background: #808080;
        }
        .due {
            margin-top: 300px;
            height: 500px;
            background: #ff00ff;
        }
    </style>
</head>
    <body>
        <div class="uno" onclick="scrollTo()"> 
        Clicca
        </div>
        <div class="due" id="div_id"></div>
    </body>
</html>

Essaye ça:

19
Rohit

Modifiez votre script en:

$('.uno').on('click', function(){
    $('html, body').animate({scrollTop: $("#div_id").offset().top}, 'slow');
});

et supprimez onclick de la première div.

Une démo est dans ce jsFiddle .

4
Parkash Kumar

voir mon jsfiddle:

vous devez ajouter jquery à vos codes, et voici ma façon:

JSFIDDLE

et dans ce jsfiddle si vous cliquez sur chaque div, vous défilerez vers un autre div DEMO

Javascript 

$("#firstDiv").click(function(){
        $('html, body').animate({ scrollTop: $('#div_id').offset().top }, 'slow');

 })

[~ # ~] html [~ # ~] 

<div class="uno" id="firstDiv"> 
    Clicca
</div>
<div class="due" id="div_id"></div>
3
M98