CODEWITHSUNDEEP
javascripthtmlcss
Jay Dee
Jay Dee

Reputation: 127

Scroll button behavior

The button scrolls past the content I want to be shown. I want the "About Us" section to be showed to the display of user (100vh), but it just scrolls past that.

Here's the code:

function smoothScroll(target, duration) {
  var target = document.querySelector(target);
  var targetPosition = target.getBoundingClientRect().top;
  var startPosition = window.pageYOffset;
  var distance = targetPosition - startPosition;
  var startTime = null;

  function animation(currentTime) {
    if (startTime === null) startTime = currentTime;
    var timeElapsed = currentTime - startTime;
    var run = ease(timeElapsed, startPosition, distance, duration);
    window.scrollTo(0, run);
    if (timeElapsed < duration) requestAnimationFrame(animation);
  }

  function ease(t, b, c, d) {
    t /= d / 2;
    if (t < 1) return (c / 2) * t * t + b;
    t--;
    return (-c / 2) * (t * (t - 2) - 1) + b;
  }
  requestAnimationFrame(animation);
}

var btn = document.querySelector(".btn");
btn.addEventListener("click", function () {
  smoothScroll(".text-slider", 600);
});
.hero {
  display: flex;
  width: 90%;
  margin: auto;
  height: 100vh;
  min-height: 100vh;
  align-items: center;
  text-align: center;
  background-image: url(/img/pexels-tranmautritam-326501.jpg);
  background-size: cover;
  background-attachment: fixed;
  justify-content: center;
}

.introduction {
  flex: 1;
  height: 30%;
}

.welcometxt h1 {
  font-size: 17px;
  color: white;
  font-weight: 100;
  letter-spacing: 12px;
}

.intro-text h1 {
  font-size: 44px;
  font-weight: 700;
  color: white;
  /* background: linear-gradient(to left, rgb(184, 184, 184), #ffffff); */
  /* -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
}

.intro-text p {
  font-size: 18px;
  margin-top: 5px;
  color: white;
}

.cta {
  padding: 50px 0px 0px 0px;
}

.btn {
  background-color: white;
  width: 150px;
  height: 50px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
  color: black;
  border: none;
  border-radius: 40px;
  transition: all 0.6s ease;
  box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.4);
}

.btn:hover {
  background-color: black;
  color: white;
  box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.8);
}


.text-slider {
  width: 70%;
  height: 90vh;
  margin: 100px auto;
  position: relative;
  text-align: center;
  align-items: center;
}

.carousel {
  height: 70vh;
  overflow: hidden;
}

.slider {
  height: 100%;
  display: flex;
  width: 400%;
  transition: all 0.3s;
}

.slider p {
  width: 70%;
  font-size: 17px;
}

.slider section {
  flex-basis: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.controls .arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.controls .arrow i {
  font-size: 60px;
}

.arrow.left {
  left: 10px;
}

.arrow.right {
  right: 10px;
}

.nextpage-arrow i{
  font-size: 60px;
  cursor: pointer;
}
<section class="hero">
        <div class="introduction">
            <div class="welcometxt">
                <h1>
                    WELLCOME
                </h1>
            </div>
            <div class="intro-text">
                <h1>Optimal Solution for Your Product</h1>
                <p>
                    Ensuring optimal solution for your
                    Quality Management.
                </p>
            </div>
            <div class="cta">
                <button class="btn">Click for more</button>
            </div>
        </div>
    </section>

    <div class="text-slider" id="text-slider">
        <h1>About Us</h1>
        <div class="carousel">
            <div class="slider">
                <section>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam, fugiat.</p>
                </section>
                <section>
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat, commodi?</p>
                </section>
                <section>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, velit.</p>
                </section>
                <section>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, aperiam.</p>
                </section>
            </div>
            <div class="controls">
                <span class="arrow left">
                    <i class="material-icons">
                        keyboard_arrow_left
                    </i>
                </span>
                <span class="arrow right">
                    <i class="material-icons">
                        keyboard_arrow_right
                    </i>
                </span>
            </div>
        </div>
        <div class="nextpage-arrow">
            <span class="text-slider-btn">
                <i class="material-icons">
                    keyboard_arrow_down
                </i>
            </span>
        </div>
    </div>

As shown in the picture, it goes past "About Us" h1. I want the page to stop at "About Us", and not go past it. If you need more code, or more explanation please comment and I'll try my best! Thank you in advance.

enter image description here

UPDATE (GIF): enter image description here

Upvotes: 0

Views: 96

Answers (1)

mahan
mahan

Reputation: 14935

That code that you use for smooth scroll is unnecessary. You should better use Element.scrollIntoView()

Element.scrollIntoView()

The Element interface's scrollIntoView() method scrolls the element's parent container such that the element on which scrollIntoView() is called is visible to the user. MDN - Element.scrollIntoView()

Use the following code should you want to scroll to About Us section when you click on Click for more button.

// 'Click for more' button
const button = document.querySelector("#more-info")

button.onclick = () => {
   document.querySelector("#text-slider")
      .scrollIntoView({block: "start", behavior: "smooth"})
}


const button = document.querySelector("#more-info")

button.onclick = () => {
document.querySelector("#text-slider")
      .scrollIntoView({block: "start", behavior: "smooth"})
}
.hero {
  display: flex;
  width: 90%;
  margin: auto;
  height: 100vh;
  min-height: 100vh;
  align-items: center;
  text-align: center;
  background: #000;
  background-image: url(/img/pexels-tranmautritam-326501.jpg);
  
  background-size: cover;
  background-attachment: fixed;
  justify-content: center;
}

.introduction {
  flex: 1;
  height: 30%;
}

.welcometxt h1 {
  font-size: 17px;
  color: white;
  font-weight: 100;
  letter-spacing: 12px;
}

.intro-text h1 {
  font-size: 44px;
  font-weight: 700;
  color: white;
  /* background: linear-gradient(to left, rgb(184, 184, 184), #ffffff); */
  /* -webkit-background-clip: text;
        -webkit-text-fill-color: transparent; */
}

.intro-text p {
  font-size: 18px;
  margin-top: 5px;
  color: white;
}

.cta {
  padding: 50px 0px 0px 0px;
}

.btn {
  background-color: white;
  width: 150px;
  height: 50px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
  color: black;
  border: none;
  border-radius: 40px;
  transition: all 0.6s ease;
  box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.4);
}

.btn:hover {
  background-color: black;
  color: white;
  box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.8);
}

.text-slider {
  width: 70%;
  height: 90vh;
  margin: 100px auto;
  position: relative;
  text-align: center;
  align-items: center;
}

.carousel {
  height: 70vh;
  overflow: hidden;
}

.slider {
  height: 100%;
  display: flex;
  width: 400%;
  transition: all 0.3s;
}

.slider p {
  width: 70%;
  font-size: 17px;
}

.slider section {
  flex-basis: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.controls .arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.controls .arrow i {
  font-size: 60px;
}

.arrow.left {
  left: 10px;
}

.arrow.right {
  right: 10px;
}

.nextpage-arrow i {
  font-size: 60px;
  cursor: pointer;
}
<section class="hero">
  <div class="introduction">
    <div class="welcometxt">
      <h1>
        WELLCOME
      </h1>
    </div>
    <div class="intro-text">
      <h1>Optimal Solution for Your Product</h1>
      <p>
        Ensuring optimal solution for your Quality Management.
      </p>
    </div>
    <div class="cta">
      <button class="btn" id="more-info">Click for more</button>
    </div>
  </div>
</section>

<div class="text-slider" id="text-slider">
  <h1>About Us</h1>
  <div class="carousel">
    <div class="slider">
      <section>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam, fugiat.</p>
      </section>
      <section>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat, commodi?</p>
      </section>
      <section>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, velit.</p>
      </section>
      <section>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, aperiam.</p>
      </section>
    </div>
    <div class="controls">
      <span class="arrow left">
                        <i class="material-icons">
                            keyboard_arrow_left
                        </i>
                    </span>
      <span class="arrow right">
                        <i class="material-icons">
                            keyboard_arrow_right
                        </i>
                    </span>
    </div>
  </div>
  <div class="nextpage-arrow">
    <span class="text-slider-btn">
                    <i class="material-icons">
                        keyboard_arrow_down
                    </i>
                </span>
  </div>
</div>

Recommend you to add background: #000; as fallback for background-image since sometimes image might not be loaded.

Upvotes: 1

Related Questions