Scrolling

pytanie zadane 17 września 2020 w HTML i CSS przez WildHuman Początkujący (380 p.)

Cześć wszystkim, mam pytanie na temat odnośników na moich przyciskach. Mój kod wygląda następująco.

<ul class="nav-links">
					
			<img id="logonav" src="LOGO/logo-CZARNE.png" style="width:5%; height:5%;position:relative; right:350px;"></img>
			<li><a href="#Oinwestycji">O inwestycji</a><li>
			<li><a href="#PrzemieszczaniePrzyciskow">Wirtualny spacer</a><li>
					
			<li><a href="#mieszkania">Mieszkania</a><li>
			<li><a href="#slider">Galeria</a><li>
			<li><a href="#kontakt">Kontakt</a><li>
					
</ul>

I teraz pytanie czy jestem w stanie dodać wiecęj niż jeden odnośnik, tzn. moja strona troszeczkę się zmiena w wersji na telefon i ID odnośnika również się zmienia przez co mój scroll-behavior do danego elementu przestaje działać. Pozdrawiam ..

komentarz 17 września 2020 przez ScriptyChris Mędrzec (190,190 p.)

Zwrócę tylko uwagę na to, że wewnątrz <ul> nie powinno być innych elementów jak <li>, <script> lub <template>. Więc <img> tam nie pasuje.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul

Poza tym, chyba CKEditor namieszał coś w miejscu href w trzech ostatnich <a>, bo zawierają element HTML zamiast linka.

2 odpowiedzi

odpowiedź 17 września 2020 przez Comandeer Guru (607,250 p.)
wybrane 17 września 2020 przez WildHuman

Najlepsza

Tak szczerze to id nie powinny się zmieniać.

Niemniej, jeśli się zmieniają, to dla mniejszych ekranów ukryj linki przeznaczone dla desktopów, a pokaż te dla mniejszych urządzeń.

komentarz 17 września 2020 przez WildHuman Początkujący (380 p.)

Troszeczkę inaczej,

<li><a href="#slider">Galeria</a><li>

Ta linijka wskazuje na to, że powinno mnie przeskrolować do elementu o ID ="slider"

I teraz tak, w mojej sekcji mam 2x divy o dwóch różnych ID, jeden z div'ów pokazuje się lub ukrywa w zależności na jakim urządzeniu jestem. i Teraz tak. Jeżeli jeden div ma ID="slider" , a drugi ID="slider2" to zawsze mnie będzie scrolować do ID="slider" a na innym urzadeniu scrolowanie nie bedzie dzialalo. i teraz mam pytanie, czy w tej sekcji :

<li><a href="#slider">Galeria</a><li>

da się dodać dodatkowy # który bedzię scrolował mnie do ID="slider2".

Sorki za moje skomplikowane tłumaczenie, lecz jestem dopiero początkującym i ciężko mi to ubrać w słowa :D

komentarz 17 września 2020 przez Comandeer Guru (607,250 p.)

Nie da się, ale da się zastosować ten sam mechanizm, jakim ukrywasz jeden div a pokazujesz drugi, i po prostu zrobić dwa linki.

komentarz 17 września 2020 przez WildHuman Początkujący (380 p.)

Ok bedę próbował, dzięki za pomoc !!!

odpowiedź 18 września 2020 przez VBService Ekspert (256,600 p.)
edycja 18 września 2020 przez VBService

Moja propozycja rozwiązania problemu :

multianchor.html

<style>
  a.multianchor {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
  }  
  [id^="slider"] {
    margin-top: 100em;
  }
</style>
<body>

  <li><a id="multianchor" class="multianchor" data-href="slider1,slider2,slider12">Galeria</a></li>
    <div id="slider13">Slider13</div>
    <div id="slider2">Slider2</div>

<script>
const ma = document.getElementById("multianchor");
ma.addEventListener("click", () => {
  const ma_hrefs = ma.dataset.href.split(",");
  for (index in ma_hrefs) {    
    let slide = document.getElementById(ma_hrefs[index]);
    if (slide !== null) {
       let offsetTop = slide.offsetTop;
       window.scrollTo(0, offsetTop);
       console.info(`Found it: ${ma_hrefs[index]}`);
       break;
    }
  }
});
</script>
</body>

[ Edit ]

To nie zadziała tak, jak powinno, bo getElementById znajdzie też elementy, które są ukryte.

<style>
  a.multianchor {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
  }  
  [id^="slider"] {
    margin-top: 100em;
  }
  .hidden-by-display {
    display: none;
  }
  .hidden-by-visibility {
    visibility: hidden; /* visible */
  }
  .hidden-by-opacity {
    opacity: 0;
  }
</style>
<body>

<!-- <a id="multianchor" href="javascript:void(0);" data-href="slider1,slider2">Galeria</a> -->
<li><a id="multianchor" class="multianchor" data-href="slider1,slider5,slider4,slider3,slider2">Galeria</a></li>
  <div id="slider13">Slider13</div>
  <div id="slider2">Slider2</div>
  <div id="slider3" class="hidden-by-display">Slide3 hidden-by-display</div>
  <div id="slider4" class="hidden-by-visibility">Slide4 hidden-by-visibility</div>
  <div id="slider5" class="hidden-by-opacity">Slide5 hidden-by-opacity</div>

<script>
const ma = document.getElementById("multianchor");
ma.addEventListener("click", () => {
  const ma_hrefs = ma.dataset.href.split(",");
  for (index in ma_hrefs) {    
    let slide = document.getElementById(ma_hrefs[index]);    
    if (slide !== null) {
      if (getComputedStyle(slide).display !== "none" &&
          getComputedStyle(slide).opacity !== "0" && 
          getComputedStyle(slide).visibility !== "hidden") {
         let offsetTop = slide.offsetTop;
         window.scrollTo(0, offsetTop);
         console.info(`Found it: ${ma_hrefs[index]}`);
         break;
      }
    }
  }
});
</script>
</body>

CodePen

komentarz 18 września 2020 przez Comandeer Guru (607,250 p.)

To nie zadziała tak, jak powinno, bo getElementById znajdzie też elementy, które są ukryte. Będzie de facto zawsze scrollował do tego samego elementu.