Transitioning between sections by clicking on a navigation menu item

Question

Transitioning between sections by clicking on a navigation menu item

I'm looking to create a cool animation effect on my website. When a user clicks on a specific menu link, such as "about-section," I want the page to smoothly scroll down to that section in a parallax style.

If anyone knows of a jQuery plugin that could help me achieve this effect, please share it with me. It would be even better if you could provide an example for reference.

Here's the code snippet:

.Home-section {
  height: 500px;
  background: deepskyblue;
}
.About-section {
  height: 300px;
  background: deeppink;
}

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

<a href="#">Home</a>
<a href="#">About</a>

<div class="Home-section">
  <h1> Hello </h1>
</div>

<div class="About-section">
  <h1>Bye</h1>
</div>

Based on the code provided, I am aiming to animate towards the About-section when the About link is clicked.

jquery html css jquery-plugins parallax

Answer 1

Answer №1

Hope you find this helpful. Thank you.

// This Javascript code handles links with @href that start with '#'
$(document).on('click', 'a[href^="#"]', function(e) {
    // Get the target element id
    var id = $(this).attr('href');

    // Get the target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    // Prevent standard hash navigation (avoids blinking in IE)
    e.preventDefault();

    // Get the top position relative to the document
    var pos = $(id).offset().top - 10;

    // Animate scrolling to the top position
    $('body, html').animate({scrollTop: pos});
});

.Home-section {
  height:500px;
  background: deepskyblue;
  }

.About-section {
  height:300px;
  background:deeppink;
  }

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

<a href="#home">Home</a>
<a href="#about">About</a>

<div class="Home-section" id="home"><h1> Hello </h1>
  </div>

<div class="About-section" id="about"><h1>Bye</h1>
  </div>

Answer 2

Hope you find this helpful. Thank you.

// This Javascript code handles links with @href that start with '#'
$(document).on('click', 'a[href^="#"]', function(e) {
    // Get the target element id
    var id = $(this).attr('href');

    // Get the target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    // Prevent standard hash navigation (avoids blinking in IE)
    e.preventDefault();

    // Get the top position relative to the document
    var pos = $(id).offset().top - 10;

    // Animate scrolling to the top position
    $('body, html').animate({scrollTop: pos});
});

.Home-section {
  height:500px;
  background: deepskyblue;
  }

.About-section {
  height:300px;
  background:deeppink;
  }

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

<a href="#home">Home</a>
<a href="#about">About</a>

<div class="Home-section" id="home"><h1> Hello </h1>
  </div>

<div class="About-section" id="about"><h1>Bye</h1>
  </div>

Answer 3

Answer №2

If you're looking to create a parallax effect, one way to achieve it is by including the CSS property background-attachment: fixed;

.About-section {
  height: 300px;
  background: url('http://lorempicsum.com/futurama/627/200/3') no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

You can see an example here

Important: I have utilized @sagar kodte's JS code for this animation.

Answer 4

If you're looking to create a parallax effect, one way to achieve it is by including the CSS property background-attachment: fixed;

.About-section {
  height: 300px;
  background: url('http://lorempicsum.com/futurama/627/200/3') no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

You can see an example here

Important: I have utilized @sagar kodte's JS code for this animation.

Answer 5

Answer №3

please give this a try

.Home-section {
  height:500px;
  background: deepskyblue;
  }

.About-section {
  height:300px;
  background:deeppink;
  }
a{cursor:pointer}

html snippet

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
  $("a").click(function() {
  var ourclass = $(this).attr('class');
 $('html, body').animate({
 scrollTop: $("#"+ourclass).offset().top-10
 }, 2000); 
 });
 });
</script>
 <a class="home">Home</a>
 <a class="about">About</a>
<div class="Home-section" id="home"><h1> Hello </h1></div>
<div class="About-section" id="about"><h1>Bye</h1></div>

you can also find it on js fiddlde here

Answer 6

please give this a try

.Home-section {
  height:500px;
  background: deepskyblue;
  }

.About-section {
  height:300px;
  background:deeppink;
  }
a{cursor:pointer}

html snippet

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
  $("a").click(function() {
  var ourclass = $(this).attr('class');
 $('html, body').animate({
 scrollTop: $("#"+ourclass).offset().top-10
 }, 2000); 
 });
 });
</script>
 <a class="home">Home</a>
 <a class="about">About</a>
<div class="Home-section" id="home"><h1> Hello </h1></div>
<div class="About-section" id="about"><h1>Bye</h1></div>

you can also find it on js fiddlde here

Answer 7

Answer №4

.Home-section {
  height: 500px;
  background: deepskyblue;
}
.About-section {
  height: 300px;
  background: deeppink;
}

<a href="#home">Home</a>
<a href="#about">About</a>

<div class="Home-section" id="home">
  <h1> Hello </h1>
</div>

<div class="About-section" id="about">
  <h1>Bye</h1>

Give this a shot.

Answer 8

.Home-section {
  height: 500px;
  background: deepskyblue;
}
.About-section {
  height: 300px;
  background: deeppink;
}

<a href="#home">Home</a>
<a href="#about">About</a>

<div class="Home-section" id="home">
  <h1> Hello </h1>
</div>

<div class="About-section" id="about">
  <h1>Bye</h1>

Give this a shot.

Transitioning between sections by clicking on a navigation menu item

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Currently dealing with a script that utilizes AJAX GET to incorporate JSON data into my table

Having trouble receiving the response from PHP after making an AJAX request

Why is it important to have specific property names?

The JQuery app dynamically adds a new input row each time the current input row is filled, repeating this process N

Patterned background with a gradual increase

An alert box displays N times when the submit button is clicked N times

Implementing authorization middleware using Express.js in Ajax

Decide on the chosen option within the select tag

Breaking down a URL based on one of two distinct components

Using AJAX to dynamically load an image by setting the image path as the source of the image tag

Gathering video links from various sections of a site

What is the best way to align my cards side by side using html/css/js?

What is the best way to apply attributes to all titles throughout a webpage?

Challenge encountered while attempting to implement grid system in ionic framework

Interact with dynamically created form using jQuery

Switch between clicking and hiding

Html elements remain stationary and do not shift positions

PHP not receiving data from jQuery Ajax (POST) request

Switch the div class when clicked, and revert it when the body is clicked

Stop Gmail from Removing Attached HTML Files