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

How to implement a Datapicker plugin in jQuery version 2.1.1?

Implementing a Class Addition Functionality Upon Button Click in AngularJS

I seem to be encountering a z-index dilemma

Creating a PDF in Python from an HTML / CSS file with images: A step-by-step guide

Tips for breaking out of the foundation row and aligning with the right edge of the viewport

Start the jQuery animation only when the ajax information differs

What is the best way to include an attribute to an object in a knockout observable array and ensure a notification is triggered?

The Google reCaptcha reply was "Uncaught (in promise) null"

Submitting a form with AJAX using JQuery in ASP.Net is made even easier when utilizing Master Pages for

Having trouble with AngularJS not rendering on your HTML page?

When using jQuery's `text()` function, the `<br>` element is interpreted as a

Incorporate Text, HTML, and Embed Images into PHPWord

The background color is not displaying correctly on the <div> element

Effortless 'rotational' script

AngularJS attempting to conceal the popup menu upon clicking outside of the designated area

Struggling to properly position buttons within a horizontal form layout in Bootstrap

Show the flex items arranged horizontally

Tips for adding a personalized close button to a Bootstrap modal

Using jQuery to make an AJAX request to a PHP script

Aggregate the values of a key in an associative array and organize them by their respective key