Autor Zpráva
Mikel
Profil *
#1 · Zasláno: 22. 1. 2020, 19:56:10
Odpovědět Citovat
Zdravím,

ať se pokouším vymyslet nespočet možností, stále nic nefunguje jak má.

Jde o to, že chci mít u sekce nastaven padding top i bottom a chci, ať po kliknutí na kategorii se vždy stránka scrollne na začátek sekce, jenže zatím se mi to nedaří viz kód:

HTML 
<!doctype html>
<html lang="cs">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="style.css">

    <!-- Google fonts -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap" rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Jeden velký zápisník</title>
  </head>
  <body>

    <nav class="navbar navbar-light navbar-expand-lg nav-own fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#"><strong>JVZ</strong></a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
          </button>
      <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#prvni">První</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#druha">Druhá</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#treti">Třetí</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#ctvrta">Čtvrtá</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#pata">Pátá</a>
          </li>
        </ul>
      </div>
      </div>
    </nav>

    <section id="prvni" class="box">
      <div class="container box-2">
        <div class="row">
          <div class="col">
            <p>První sekce</p>
          </div>
        </div>
      </div>
    </section>

    <section id="druha" class="box">
      <div class="container box-2">
        <div class="row">
          <div class="col">
            <p>Druhá sekce</p>
          </div>
        </div>
      </div>
    </section>

    <section id="treti" class="box">
      <div class="container box-2">
        <div class="row">
          <div class="col">
            <p>Třetí sekce</p>
          </div>
        </div>
      </div>
    </section>

    <section id="ctvrta" class="box">
      <div class="container box-2">
        <div class="row">
          <div class="col">
            <p>Čtvrtá sekce</p>
          </div>
        </div>
      </div>
    </section>

    <section id="pata" class="box">
      <div class="container box-2">
        <div class="row">
          <div class="col">
            <p>Pátá sekce</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Own JavaScript -->
    <script type="text/javascript" src="scroll.js"></script>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

CSS: 
body {
    font-size: 16px;
    line-height: 24px;
    font-family: 'Open Sans', sans-serif;
}

html {
      scroll-behavior: smooth;
}

.nav-own {
    background: #ffffff;
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.08);
}

.navbar-nav {
    padding: 24px 0px;
}

.nav-link {
    color: #3D3D3D;
    font-size: 16px;
    line-height: 24px;
}

.nav-link:hover {
    color: #9ED8B3;
}

.nav-item {
    margin-right: 24px;
}

.nav-item:last-child {
    margin-right: 0px;
}

.container-page {
    padding-top: 104px;
}


.box {
    padding: 128px 0px 128px 0px;
    background-color: #f4f4f4;
      display: flex;
      border-bottom: 1px solid gray;
}

.box-2 {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
}

JS: 
// Select all links with hashes
$('a[href*="#"]')
  // Remove links that don't actually link to anything
  .not('[href="#"]')
  .not('[href="#0"]')
  .click(function(event) {
    // On-page links
    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
      && 
      location.hostname == this.hostname
    ) {
      // Figure out element to scroll to
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      // Does a scroll target exist?
      if (target.length) {
        // Only prevent default if animation is actually gonna happen
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000, function() {
          // Callback after animation
          // Must change focus!
          var $target = $(target);
          $target.focus();
          if ($target.is(":focus")) { // Checking if the target was focused
            return false;
          } else {
            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
            $target.focus(); // Set focus again
          };
        });
      }
    }
  });

Neřesil někdo z Vás podobný problém, popř. jak jste to vyřešili?

Děkuji.
lionel messi
Profil
#2 · Zasláno: 22. 1. 2020, 20:32:25
Odpovědět Citovat
Mikel:

Odkaz na kotvu a fixní hlavička nepomôže?

Neukazuje síce riešenie v jQuery, ale ako nasmerovanie možno poslúži, myslím, že ani jeden z princípov, ktoré Str4wberry ukazuje, si v kóde nevyužil.
Časová prodleva: 6 let

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0