Dev Faq
0
votes

Comment faire défiler l'actualisation de la page en utilisant JQuery?

J'ai un div avec hauteur: 400px code> je dois ajouter du contenu à l'intérieur, j'ai ajouté juste un nom de DIV The Name .Content code> maintenant je veux faire défiler jusqu'à présent Ma page Actualiser.

Mon code: - P>

p> 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
   
     <div class="contianer">
        <div class="scrollDiv">
            <div class="content"></div>
            <p>This content should be appear on page refresh</p>
        </div>
        <div class="bottom"></div>
    </div>

1 commentaires

Qu'essayez-vous de faire défiler vers le bas? Toute la page (document) ou le scrolldiv ?

4 Réponses :

0
votes

Votre code JavaScript est correct.

La raison pour laquelle il ne fonctionne pas est parce que vous définissez Scrolldiv hauteur à 300, mais c'est contenu est de 1500;

Changez votre ScrollDiv à 1500, vous verrez cela fonctionne.

1 commentaires

Je sais après avoir supprimé ScrollDiving à 1500, il fonctionnera, mais il y aura du contenu illimité à ScrollDiv alors que la hauteur peut être augmentée, pourquoi j'ai donné à ScrollDiv Hauteur 1500, ce n'est pas une solution ...

0
votes 
     <link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
   </script>
        <script 
    src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"> 
   </script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"> 
   </script>
       
         <div class="contianer">
            <div class="scrollDiv" id="scrollToBottom">
                <div class="content"></div>
                <p>This content should be appear on page refresh</p>
            </div>
            <div class="bottom"></div>
        </div>
0 commentaires
0
votes

Vous pouvez utiliser max-hauteur code> suivant hauteur code> si le contenu devrait augmenter.

p> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
   
     <div class="contianer">
        <div class="scrollDiv">
            <div class="content"></div>
            <p>This content should be appear on page refresh</p>
        </div>
        <div class="bottom"></div>
    </div>

0 commentaires
2
votes

Je pense que vous devriez le faire comme ça, au lieu de simplement faire défiler le HTML, corps code>.

Vous devez également faire défiler le .scrolldiv code> car il s'agit de celui-ci avec un contenu long. p>

p> 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
   
     <div class="contianer">
        <div class="scrollDiv">
            <div class="content"></div>
            <p>This content should be appear on page refresh</p>
        </div>
        <div class="bottom"></div>
    </div>

1 commentaires

Heureux d'avoir pu aider :)

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO