How to create event between sessions transition?

Asked

Viewed 178 times

-1

I own a element <a> in my .html, where I need that when there was the event of onclick in the same, would occur the transitional effect of session, that is to say:

With the event onclick in the element <a> automatically it would transit between each session of my <body>.

What I managed to develop was the following:

In accordance with the every click in the element the same goes down every session.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div id="scroll">
    <a href="#" class="defaut-btn-gradient -button scroll"><i class="fas fa-angle-double-left"></i> Scroll Down</a>
</div>
<div class="section" id="section1"></div>
<div class="section" id="section2"></div>
        <script>
var secs = document.querySelectorAll('.section');
var currentSection = 0;
document.querySelector('#scroll').addEventListener('click', move);

function move(e) {
  if (e.target.classList.contains('scroll') && currentSection < secs.length) {
    window.scroll({
      top: secs[++currentSection].offsetTop,
      left: 0,
      behavior: 'smooth'
    });
    //    secs[++currentSection].scrollIntoView({ behavior: 'smooth' });
  } else if (currentSection > 0) {
    window.scroll({
      top: secs[--currentSection].offsetTop,
      left: 0,
      behavior: 'smooth'
    });

  }
}
        </script>
</body>
</html>
javascript html jquery rolling

  • I suggest you read the community guidelines to create a good question, it is a bit confusing and you need to post all the code referring to the subject of the question, to improve the analysis of users.

2 answers

1

You’d have to do more or less that:

var secs = document.querySelectorAll('section');
var currentSection = 0;
document.querySelector('#arrow').addEventListener('click', move);

function move(e) {
  if (e.target.classList.contains('next') && currentSection < secs.length) {
    window.scroll({
      top: secs[++currentSection].offsetTop,
      left: 0,
      behavior: 'smooth'
    });
    //    secs[++currentSection].scrollIntoView({ behavior: 'smooth' });
  } else if (currentSection > 0) {
    window.scroll({
      top: secs[--currentSection].offsetTop,
      left: 0,
      behavior: 'smooth'
    });

  }
}
section {
  min-height: 800px;
}

#arrow {
  position: fixed;
  right: 0;
  top: 0;
  background-color: black;
  color: white;
}

#arrow a {
  display: inline-block;
  padding: 10px 20px;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="arrow">
  <a class="previous">anterior</a>
  <a class="next">proximo</a>
</div>
<section style="background-color:green">
  <h1>

    Lorem ipsum<br> dolor sit amet, consectetur adipisicing elit. Perferendis, earum unde, deleniti id tempore atque in nemo reprehenderit ad odit, nisi blanditiis<br> odio pariatur<br> non tempora ducimus tenetur nobis quibusdam?</h1>
</section>
<section style="background-color:blue">Lorem ipsum dolor sit<br> amet, consectetur adipisicing elit. Ducimus cum officia culpa quia id, dicta voluptatem aspernatur reprehenderit repellendus minima, sapiente mollitia dolore magnam delectus, ad eius ut iusto eos?</section>
<section style="background-color:red">Lorem ipsum dolor sit<br> amet, consectetur adipisicing elit. Consequatur magnam illo possimus rerum ratione. Quos harum dicta nihil illum atque, consequatur<br> cupiditate sint fugiat dolores consectetur quasi deserunt repellendus enim.</section>

Using the "Next" button as your button.

  • Opa cara thanks for the answer I am very beginner in js my site does not use sections but div with class Section and an id with the number of the If the link is in the description of the question looking as it is structured as would be your code in a version adapted to my code could break that ?

  • i edited the question there if you can help me because in your code you adapt to <Section> in my case I use div

  • Here: var secs = document.querySelectorAll('section'); you will change to var secs = document.querySelectorAll('.section');

0

There are several ways to make this type of "animation", which are:

  • Use the Jquery (To this day Jquery is totally outdated its use)
  • Utilise Function (create a simple Javascript + ECMASCRIPT function and manipulate the id of <section>)

I’ll give you the run of how I would use and which I think it’s right for today, where is using the Function, but for this, first I need to explain to you about the event Window.location.

Window.Location

The estate Window.location is read-only and returns an object Location with information about the current location of the document. Although Window.location is a read-only object of Location , you can also assign a DOMString to him. It means that you can work with the location as if it were a string in most cases: location = 'http://www.example.com' is synonymous with location.href = 'http://www.example.com'.

SOURCE: MOZZILA DEVELOPER

In this case I will use the property .href of Window.location, where:

Location.href

Is a DOMString containing the entire URL. If changed, the associated document navigates to the new page. Can be defined from a different origin than the associated document.

SOURCE: MOZZILA DEVELOPER

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ÂNCORAS DE SESSÕES</title>
</head>
<body>
    <section id="section-one" style="background-color: red; padding: 300px">
        <h1>SEÇÃO (1)</h1>
    </section>

    <section id="section-two" style="background-color: blue; padding: 300px">
        <h1>SEÇÃO (2)</h1>
    </section>

    <section id="section-three" style="background-color: green; padding: 300px">
        <h1>SEÇÃO (3)</h1>
    </section>

    <section id="section-for" style="background-color: yellow; padding: 300px">
        <h1>SEÇÃO (4)</h1>
    </section>

    <script>
        function alterarSessao(_sectionID, _sectionGoToID) {
            document.getElementById(`${_sectionID}`).addEventListener('click', (_event) => window.location.href = `#${_sectionGoToID}`);
        }

        alterarSessao('section-one',   'section-two');
        alterarSessao('section-two',   'section-three');
        alterarSessao('section-three', 'section-for');
        alterarSessao('section-for',   'section-one');
    </script>
</body>
</html>

NOTE:

To animate the scroll up to the given Section you have two options, which are:

  • Develop an Algorithm

  • Use ready-made Libraries such as Scrollmagic

Browser other questions tagged javascript html jquery rolling

You are not signed in. Login or sign up in order to post.