Как создать кнопку прокрутки - PullRequest
Новая
       87

Как создать кнопку прокрутки

0 голосов
/ 04 августа 2020

У меня есть код, в котором основная функция - нажатие вкладки. Вкладка выделится и переместится в этот раздел кода. Вкладка «Персонаж» работает, а вкладка «О программе» просто переносит меня в начало страницы, поэтому я не знаю наверняка, работает ли она. Однако вкладка «Свяжитесь с нами» и вкладка «Боевые диски» полностью неверны. Вкладка «Связаться с нами» переводит меня на вкладку «Боевой диск», а вкладка «Боевой диск» - под ним. Я хочу создать функцию, в которой при нажатии вкладки требуется именно этот элемент / раздел c. Было бы разумнее добавить идентификатор к определенному элементу c, где он используется, вместо того, чтобы просто добавлять его к элементу div. 

const makeNavLinksSmooth = () => {
  const navLinks = document.querySelectorAll('.nav-tab'); // add the name of the class you want to highlight when section appears

  // this for loop checks all the elemnts which have class '.nav-tab' and adds a click event to it so it can scroll to that section
  for (let n in navLinks) {
    if (navLinks.hasOwnProperty(n)) {
      navLinks[n].addEventListener('click', e => {
        e.preventDefault();
        document.querySelector(navLinks[n].hash)
          .scrollIntoView({
            behavior: "smooth"
          });
      });
    }
  }
}

const spyScrolling = () => {
  const sections = document.querySelectorAll('.panel'); // a common name give to each section to identify them

  // on scroll will highligh the nav item when reaches to the specific section
  window.onscroll = () => {
    const scrollPos = document.documentElement.scrollTop || document.body.scrollTop;

    for (let s in sections) {
      console.log(scrollPos, sections[s].offsetTop)
      if (sections.hasOwnProperty(s) && sections[s].offsetTop <= scrollPos + 100) {
        const id = sections[s].id;
        document.querySelector('.active').classList.remove('active');
        document.querySelector(`a[href*=${ id }]`).parentNode.classList.add('active');
      }
    }
  }
}

makeNavLinksSmooth();
spyScrolling();
<body class="scroll-area" data-spy="scroll" data-offset="0">
  <header class="section">

    <!-- container -->
    <div class="">
      <div class="col-xs-3">
        <img src="images/ShoeJackCityLogo.png" class="img logo">
      </div>
      <nav id="site-nav">
        <ul class="group">
          <li><a href="https://twitter.com/_ShoeJackCity">Twitter</a></li>
          <li><a class="nav-tab" href="#characters">Characters</a></li>
          <li><a class="nav-tab" href="#battle_drives">Battle Drives</a></li>
          <li class="active"><a class="nav-tab" href="#about">About</a></li>
          <li><a class="nav-tab" href="#follow_us">Contact Us</a></li>
        </ul>
      </nav>

    </div>

  </header>

  <div class="content-area group section">
    <!-- container -->
    <div class="container panel" id="about">
      <!-- row -->
      <div class="Title">
        <h1>ShoeJackCity</h1>
        <p>SJC is a mobile game where you can buy, sell, and play in a compettive 11v1 fighting tournament against real users to win sneakers.</p>
      </div>
      <div class="row">
        <div class="col col-sm-8 col-lg-8">
          <div class="game-play">
            <video controls>
                        <source src="videos/RPReplay_Final1595357560.MP4" type="video/MP4">
                    </video>
          </div>
        </div>
        <div class="col col-sm-4 col-lg-4">
          <h3>About</h3>
          <p>Shoe Jack City is a first of its kind mobile gaming resell app that allows players to buy,sell, and compete for rare, high-end sneakers in a tournament style battle royale.</p>

          <p>Inspired by the MegaMan Battle Network Series, players can choose thier Anomalies, collect battle drives to unleash powerful attacks and hidden abilities.</p>

          <p>Buy and/or sell sneakers, and Dominate your way against friends and compete in 1v1 tournament battle royale to win top tier sneakers and reduce your sellers transaction fee!</p>
        </div>
      </div>
    </div>
    <!-- container -->
    <div class="container panel" id="follow_us">
      <!-- row -->
      <h1 class="m-2">Follow us/Contact Us</h1>
      <!-- row -->
      <div class="row">
        <!-- col -->
        <div class="col col-sm-8">
          <div class="col col-sm-4 col-lg-4">
            <!-- box-a -->
            <div class="box-twitter">
              <p><a href="https://twitter.com/_ShoeJackCity">Twitter</a></p>
            </div>
            <!-- /box-a -->
          </div>
          <!-- /col -->

          <!-- col -->
          <div class="col col-sm-4 col-lg-4">
            <!-- box-a -->
            <div class="box-insta">
              <p><a href="https://www.instagram.com/_shoejackcity/?hl=en">Instagram</a></p>
            </div>
            <!-- /box-a -->
          </div>
          <!-- /col -->

          <!-- col -->
          <div class="col col-sm-4 col-lg-4">
            <!-- box-a -->
            <div class="box-facebook">
              <p>Facebook</p>
            </div>
            <!-- /box-a -->
          </div>
          <!-- /col -->
        </div>
        <!-- col -->
        <div class="col col-sm-4 col-lg-4">
          <!-- box-a -->
          <form>
            <div class="box-b">
              <input id="email" class="email-input" type="email" name="email" placeholder="Email">
            </div>
            <input type="submit" value="Subscribe" class="subscribe-button">
          </form>

        </div>

      </div>
    </div>
    <div class="container panel" id="battle_drives">
      <!-- row -->
      <div class="row">

        <!-- col -->
        <h2>Battle Drives</h2>
        <div class=" push-down-sm">


          <!-- row -->
          <div class="row">

            <!-- col -->
            <div class="col col-sm-6 col-lg-3">
              <!-- box-a -->
              <div class="box-a">
                <img src="images/BC_Area_advance.png">
                <p>Slices 1 enemy directly Slices 1 enemy directly Slices 1 enemy directly ahead. Range is 2 spaces, 80dmg, 40MB, LVL 1</p>
              </div>
              <!-- /box-a -->
            </div>
            <!-- /col -->

            <!-- col -->
            <div class="col col-sm-6 col-lg-3">
              <!-- box-a -->
              <div class="box-a">
                <img src="images/BC_Area_advance.png">
                <p>AreaAdvance: Steals up to the first 4 available spaces. MB: 200, LV 1</p>
              </div>
              <!-- /box-a -->
            </div>
            <!-- /col -->

            <!-- col -->
            <div class="col col-sm-6 col-lg-3">
              <!-- box-a -->
              <div class="box-a">
                <img src="images/BC_Area_advance.png">
                <p>Mamba Mentality - raise attack power of Level 1 chip x2. MB:50, LV 1</p>
              </div>
              <!-- /box-a -->
            </div>
            <!-- /col -->

            <!-- col -->
            <div class="col col-sm-6 col-lg-3">
              <!-- box-a -->
              <div class="box-a">
                <img src="images/BC_Area_advance.png">
                <p>Mamba Mentality - raise attack power of Level 1 chip x2. MB:50, LV 1</p>
              </div>
              <!-- /box-a -->
            </div>
            <!-- /col -->

          </div>
          <!-- /row -->

          <!-- row -->


        </div>
        <!-- /col -->



      </div>
      <!-- /row -->

    </div>
    <!-- /container -->
    <!-- container -->
  </div>
  <div class="container  p-2 panel" id="characters">
    <div class="row">
      <h2 class="">Characters</h2>

      <!-- col -->
      <div class="col col-xs-6">
        <img class="postion" src="images/Marbelle_ingame_concept.png">
      </div>
      <!-- /col -->

      <!-- col -->
      <div class="col col-xs-6">
        <img class="postion" src="images/Ade_ingame_concept.png">
      </div>
      <!-- /col -->

    </div>
    <!-- /row -->
  </div>

  <footer>
    <p>&copy; 2014 - This is the footer.</p>
  </footer>
</body>

pokeymon

покемон-ушел

1 Ответ

0 голосов
/ 04 августа 2020 

<!DOCTYPE html>
<html>
<head>
<style>
body {
  height: 3000px;
  background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
}
</style>
</head>
<body>

<h1>Change Background Gradient on Scroll</h1>

<h2>Linear Gradient - Top to Bottom</h2>
<p>This linear gradient starts at the top. It starts green, transitioning to blue.</p>

<h2 style="position:fixed;">Scroll to see the effect.</h2>

</body>
</html>

для получения дополнительной информации перейдите по этой ссылке https://www.w3schools.com/howto/howto_css_bg_gradient_scroll.asp

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...