Scroll automatique au chargement

Bonjour tout le monde,

N’étant pas expert en JS, je cherche à savoir si quelqu’un avait réussi ou si il saurait comment faire un scroll automatique vers le bas au chargement d’un design ?
La demande peut sembler étrange, mais c’est pour l’ouverture du design sur mon echo show 15 pour faire disparaitre la barre d’adresse de silk :grin:

Merci à tous !

bonjour,
il existe plein de possibilités pour un navigateur mais vu ta demande spécifique,
ne sachant pas ton soucis « barre d’adresse de silk »
je t’envoie sur un lien forum

Ou pour le plein écran

Dans la miniature clic sur l’icône
Codeopen a côté de result (haut droite) pour essai


pour essai
sinon tu crées une section dans ton design
crée un design « test »

tu ajjoutes un texte/html

tu colles

<body>
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
     <style>
#section {
       color: #fff;
  background-image: linear-gradient(135deg, #232a31, #90094c, #42275a, #ff9800, #00bcd4, #009688, #283593, #795548, #485563, #FFC107, #1e88e5, #000000, #673ab7, #ff9800, #00bcd4, #7ED6DF, #FAFAFA, #795548, #CDDC39);
       } 
       
#section1, #section2, #section3, #section4, #section5, #section6, #section7, #section8, #section9, #section10,
#section11, #section12, #section13, #section14, #section15, #section16, #section17, #section18, #section19, #section20 
       {padding-top:0px;height:630px;} 

       .menu-flottant {
    width:11.5em; /* Largeur des items du menu*/
    float: right; /* Je veux que le menu soit à droite*/
    position:fixed; /* Le menu est fixe à l'écran*/
    z-index:1000; /* Il sera au dessus de tous les éléments*/
    top: 20%; /* Il sera à 40% du bord supérieur de l'écran*/
    font-size: 1em; /* Taille de la police*/
    line-height: 2px; /* Hauteur de ligne du menu*/
    color: #000; /* Couleur de la police*/
    font-weight:700; /* Mettre le texte en gras*/
    text-transform:uppercase; /* Mettre le texte en majuscule*/
    right: -8em; /* Décalage du menu sur la droite pour masquer le texte et ne laisser que les icônes de visibles*/
}
.menu-flottant ul {
    list-style: none; /* Le menu est une liste, mais je ne veux pas afficher les puces*/
    margin: 0; /* Choix des marges internes et externes*/
    padding: 0;
}
.menu-flottant ul li {
    display:block; /* Définition des items en tant que bloc*/
    background-color: white; /* Couleur de fond*/
    height: 3.5em; /* Hauteur des items du menu*/
    padding: 1em 1em; /* Marges internes des items du menu*/
    position: relative; /* On leur attribut une position relative*/
    -webkit-transition: -webkit-transform 0.5s; /* Effet de déplacement au passage de la souris*/
    -moz-transition: -webkit-transform 0.5s; /* On le définit plusieurs fois pour assurer la compatibilité entre les navigateurs*/
	transition: transform .5s;
}
/*Couleurs de fond des items du menu*/
.menu-flottant ul li:nth-child(1) { 
  color: #232a31; /* Couleur du texte*/
} 
.menu-flottant ul li:nth-child(2) { 
	color: #90094c; /* 2e item du menu*/
} 
.menu-flottant ul li:nth-child(3) { 
	color: #283593; /* 3e item du menu*/
}

.menu-flottant ul li:nth-child(4) { 
	color: #2d3436; /* 4e item du menu*/
}   

/* Si vous en avez plus de 3, ajouteZ ici les mêmes lignes en remplaçant les chiffres et couleurs*/

/* Création de la transformation CSS qui permet d'afficher le menu au passage de la souris*/
.menu-flottant ul li:hover {
    -webkit-transform: translateX(-8em);
    transform: translateX(-8em);
}

/* Mise en forme des liens du menu*/
.menu-flottant ul li a {
    display:block; /* On les définit en tant que bloc*/
   color: #000;  /* Couleur du texte*/
    text-decoration: none; /* On ne veut pas qu'ils soient soulignés par exemple*/
    position: absolute; /* On leur attribut une position absolue*/
    font-size:1em; /* Taille de la police*/
    line-height: 1.5em; /* Hauteur de ligne*/
    height:2em; /* Hauteur*/
    top:0; /* Positionnement*/
    bottom:0;
    right: 0.5em;
    margin:0 auto;
    padding:1em 1.5em;
}
  
/* Mise en forme des icônes du menu*/
  .menu-flottant ul li span {
    float: left;  /* On les cale à gauche */
    line-height: 1.5em; /* Hauteur de ligne */
    height:2em;
    padding-bottom: 0.8em;
  }  
       h3 {
         margin-left: 35px;
        }     
  </style>
     <div id="section" >

       <div id="section1" class="container-fluid"><h3>Résumés</h3></div>
<div id="section2" class="container-fluid"><h3>Présence</h3></div>
<div id="section3" class="container-fluid"><h3>Accés & Ouvrant</h3></div>
<div id="section4" class="container-fluid"><h3>Luminaires</h3></div>
<div id="section5" class="container-fluid"><h3>On/Off</h3></div>
<div id="section6" class="container-fluid"><h3>Volets</h3></div>
<div id="section7" class="container-fluid"><h3>Météo</h3></div>
<div id="section8" class="container-fluid"><h3>Consommation</h3></div>
<div id="section9" class="container-fluid"><h3>Températures</h3></div>
<div id="section10" class="container-fluid"><h3 style="color:black;">Radiateur</h3></div>
<div id="section11" class="container-fluid"><h3>section11</h3></div>
<div id="section12" class="container-fluid"><h3>section12</h3></div>
<div id="section13" class="tab-pane container-fluid"><h3>section13</h3></div>
<div id="section14" class="container-fluid"><h3>section14</h3></div>
<div id="section15" class="container-fluid"><h3>section15</h3></div>
<div id="section16" class="container-fluid"><h3>section16</h3></div>
<div id="section17" class="container-fluid"><h3>section18</h3></div>
<div id="section18" class="tab-pane container-fluid"><h3>Scénarios</h3></div>
<div id="section19" class="container-fluid"><h3>section19</h3></div>
<div id="section20" class="tab-pane container-fluid"><h3>le bas</h3></div>
 </div>

<script>
/*
  
screen.orientation.lock('portrait');

  // force le mode
// pour cacher la scroll bar
// $("body").css("overflow", "hidden");
var $log = $( ".div_displayObject" ),
  str2 =
    '                                                           \
      <div class="menu-flottant">								\
		<ul>																								\
<li><span><i style="position: relative;right:3px;bottom:5px;"class="fa maison-home63 fa-2x"></i></span><a href="#section1" style="color:#232a31;">Résumés</a></li>                         \
<li><span><i style="position: relative;right:3px;bottom:5px;"class="fa personne-toilet1 fa-2x"></i></span><a href="#section2" style="color:#90094c;">Presences</a></li> 							\
<li><span><i style="position: relative;right:3px;bottom:5px;"class="fa meteo-brouillard fa-2x"></i></span><a href="#section7" style="color:#283593;">Météo</a></li>					\
<li><span><i class="fas fa-question"></i></span><a href="#section20">Question</a></li>					\
</ul>													\
</div>	\
    '
   //  html = $.parseHTML( str2 ),
//  $log.append( html );
*/
     window.location.href="#section2";
  

</script>

</body>

en désactivant le mode Edition
au rafraichissement de ton design tu arrives directement
à la section 2 « présence » soit 630px plus bas
que la section 1 « résumé »

Enregistrement-2023-12-02-231428

1 « J'aime »

Hello,

Merci pour ta réponse, malheureusement pour moi ça ne résout pas mon problème… Je pensais que ça fonctionnerais :sweat_smile:

J’ai lu tout les sujet sur jeedom concernant les Echo Show pour afficher un design :+1:

Et pour être plus précis, quand tu ouvre un design sur silk (le navigateur d’Amazon) laisse la barre de navigation apparente. Pour quelle disparaisse et que le design soit en plein écran il faut scroller vers le bas :

Après avoir scroller vers le bas :

Tu peux peut être aussi installer un autre navigateur voir un plug design.

10 Installez des applications Android depuis votre smartphone

En téléchargement depuis le market l’appli du plug sur ton tel et en l’envoyant a ton amazon tv

Les développeurs des plug ont peut être essayer ?

J’ai tout tester, Amazon c’est remis a tout bloquer depuis Juin ou Juillet de ce que j’ai vue. Même le mode développeur de la tablette est bridé désormais. J’ai passer quasiment 2 semaines non stop a tenter de trouver une solution plus conviviale mais plus rien ne fonctionne. :unamused:

C’est pour ça que j’espérais qu’un scroll automatique permettrais de faire disparaitre la barre de navigation mais non :sweat_smile:

ça va être compliqué !

Il n’existe pas de rom alternative ?

appareamant ça marche encore, tout une procédure :reset blocage mise à jour,

dealabs

sinon prend contact avec les utilisateurs, ils t’en diront mieux