Főoldalra

jQuery link görgető animate()

Görgetés a hivatkozási linkhez tartozó témakörhöz.

<p id="temak"> Témak.</p>

Oldalhivatkozási linkek:
1. <a href="#section1"> Click! Kattints ide, a 1. szakaszhoz (Témakörhöz) történő sima görgetéshez.
2. <a href="#section2"> Click! Kattints ide, a 2. szakaszhoz (Témakörhöz) történő sima görgetéshez.
3. <a href="#section3"> Click! Kattints ide, a 3. szakaszhoz (Témakörhöz) történő sima görgetéshez.
4. <a href="#section4"> Click! Kattints ide, a 4. szakaszhoz (Témakörhöz) történő sima görgetéshez.

 

 

<div class="szakasz" id="section1">

<h2> 1. Témakör. </h2>

<p> Bekezdés tartalma.</p>

</div>

 

 

<div class="szakasz" id="section2">

<h2> 2. Témakör. </h2>

<p> Bekezdés tartalma.</p>

</div>

 

 

<div class="szakasz">

<h2 id="section3"> 3. Témakör. </h2>

<p> Bekezdés tartalma.</p>

</div>

 

 

<div class="szakasz">

<h2> 4. Témakör. </h2>

<p id="section4"> Bekezdés tartalma. </p>

</div>


1. <a href="#section1"> Click! Kattints ide, a 1. szakaszhoz (Témakörhöz) történő sima görgetéshez.
2. <a href="#section2"> Click! Kattints ide, a 2. szakaszhoz (Témakörhöz) történő sima görgetéshez.
3. <a href="#section3"> Click! Kattints ide, a 3. szakaszhoz (Témakörhöz) történő sima görgetéshez.
4. <a href="#section4"> Click! Kattints ide, a 4. szakaszhoz (Témakörhöz) történő sima görgetéshez.

<a href="#temak"> Click! Kattints ide, a témakör elejére történő sima görgetéshez.


<head>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>

<script>
$(document).ready(function(){
// Addjunk hozzá sima görgetést, az összes kettőskereszttel(hash) rendelkező linkhez.
  $("a").on('click', function(event) {
    var temakor = this.hash;

    //  Görgetés optimális értéke, number(800) milliseconds.
    $('html, body').animate({
      scrollTop: $(temakor).offset().top
    }, 800, function(){
   
       // A kettőskeresztnél (#) megadott, (URL) oldal címre görgetés. (default click viselkedés, görgetéssel.)
      window.location.hash = temakor;
    });
  });

});
</script>
    <style>
        .szakasz{border: 2px solid red; background-color: orange;}
        section{min-height: 100%;}
    </style>
</head>

<body>
<p id="temakorok"> Témakörök.</p>
1. <a href="#section1"> Click! Kattints ide, az 1. szakaszhoz (Témakörhöz) történő sima görgetéshez.</a><br />
2. <a href="#section2"> Click! Kattints ide, a 2. szakaszhoz (Témakörhöz) történő sima görgetéshez.</a><br />
3. <a href="#section3"> Click! Kattints ide, a 3. szakaszhoz (Témakörhöz) történő sima görgetéshez.</a><br />
4. <a href="#section4"> Click! Kattints ide, a 4. szakaszhoz (Témakörhöz) történő sima görgetéshez.</a>

<p>&nbsp;</p><hr></hr><p>&nbsp;</p>

<div class="szakasz" id="section1">
  <section style="background-color:yellow">
  <h2> 1. Témakör. </h2>
  <p> Bekezdés tartalma.</p>
  </section>
</div>

<p>&nbsp;</p><hr></hr><p>&nbsp;</p>

<div class="szakasz" id="section2">
  <section style="background-color:pink">
  <h2> 2. Témakör. </h2>
  <p> Bekezdés tartalma.</p>
  </section>
</div>

<p>&nbsp;</p><hr></hr><p>&nbsp;</p>

<div class="szakasz">
  <section style="background-color:yellow">
  <h2 id="section3"> 3. Témakör. </h2>
  <p> Bekezdés tartalma.</p>
  </section>
</div>

<p>&nbsp;</p><hr></hr><p>&nbsp;</p>

<div class="szakasz">
  <section style="background-color:pink">
  <h2> 4. Témakör. </h2>
  <p id="section4"> Bekezdés tartalma. </p>
  </section>
</div>

<p>&nbsp;</p><hr></hr><p>&nbsp;</p>

<a href="#temakorok"> Click! Kattints ide, a témakörökhöz történő sima görgetéshez.</a><br />
1. <a href="#section1"> Click! Kattints ide, az 1. szakaszhoz (Témakörhöz) történő sima görgetéshez.</a><br />
2. <a href="#section2"><a href="#section2"> Click! Kattints ide, a 2. szakaszhoz (Témakörhöz) történő sima görgetéshez.</a><br />
3. <a href="#section3"><a href="#section3"> Click! Kattints ide, a 3. szakaszhoz (Témakörhöz) történő sima görgetéshez.</a><br />
4. <a href="#section4"><a href="#section4"> Click! Kattints ide, a 4. szakaszhoz (Témakörhöz) történő sima görgetéshez.</a>

</body>