Fade in animation when scrolling

Question

Fade in animation when scrolling

I have developed a simple link animation for scrolling. This link can be used to navigate to a section within the same page or an external URL. However, there are a couple of issues that I encountered with this implementation.

First Issue: When clicking on the button ("section 4"), there is a strange movement experienced. This inconsistency was the initial problem I faced.
Second Problem: If a user clicks on a button multiple times and then proceeds to click on another button, the scroll function does not work until the previous click action has completed:
The code snippet is as follows:

 $(".links a").click(function () {
            $("html, body").animate({
                scrollTop: $($(this).attr("href")).offset().top
            }, 1400)
        })

.links {
    width:600px;
    position:fixed;
    top:0;
    padding:20px;
}
.links a {
    display:inline-block;
    padding:10px 20px;
    border:1px solid #0094ff;
}
.section {
    width:400px;
    height:200px;
    margin:300px auto 600px;
    background-color:#0094ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="links">
        <a href="#section1">Section 1</a>
        <a href="#section2">Section 2</a>
        <a href="#section3">Section 3</a>
        <a href="#section4">Section 4</a>
        <a href="http://google.com">External Link</a>
    </div>
    <div id="section1" class="section"></div>
    <div id="section2" class="section"></div>
    <div id="section3" class="section"></div>
    <div id="section4" class="section"></div>

Note: Please refrain from suggesting any plugins, as I am keen on exploring Javascript further.

javascript jquery html css

Answer 1

Answer №1

If you want to prevent the default event behavior, you can use e.preventDefault().

To pass the event argument into the click event, make sure to include it in your function like this:

$(".links a").click(function (e) {

With this setup, you are now able to control the default event of the click using preventDefault. More details on https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault.

In addition, you can utilize stop() to correct any animation issues.

 $(".links a").click(function (e) {
  if ($(this).attr("href").charAt(0) == "#") {
    e.preventDefault();
    $("html, body").stop().animate({
      scrollTop: $($(this).attr("href")).offset().top
    }, 1400)
  }
});

.links{
                width:600px;
                position:fixed;
                top:0;
                padding:20px;
            }
            .links a{
                display:inline-block;
                padding:10px 20px;
                border:1px solid #0094ff;
            }
            .section{
                width:400px;
                height:200px;
                margin:300px auto 600px;
                background-color:#0094ff;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="links">
        <a href="#section1">Section 1</a>
        <a href="#section2">Section 2</a>
        <a href="#section3">Section 3</a>
        <a href="#section4">Section 4</a>
        <a href="http://google.com">External Link</a>
    </div>
    <div id="section1" class="section"></div>
    <div id="section2" class="section"></div>
    <div id="section3" class="section"></div>
    <div id="section4" class="section"></div>

Answer 2

If you want to prevent the default event behavior, you can use e.preventDefault().

To pass the event argument into the click event, make sure to include it in your function like this:

$(".links a").click(function (e) {

With this setup, you are now able to control the default event of the click using preventDefault. More details on https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault.

In addition, you can utilize stop() to correct any animation issues.

 $(".links a").click(function (e) {
  if ($(this).attr("href").charAt(0) == "#") {
    e.preventDefault();
    $("html, body").stop().animate({
      scrollTop: $($(this).attr("href")).offset().top
    }, 1400)
  }
});

.links{
                width:600px;
                position:fixed;
                top:0;
                padding:20px;
            }
            .links a{
                display:inline-block;
                padding:10px 20px;
                border:1px solid #0094ff;
            }
            .section{
                width:400px;
                height:200px;
                margin:300px auto 600px;
                background-color:#0094ff;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="links">
        <a href="#section1">Section 1</a>
        <a href="#section2">Section 2</a>
        <a href="#section3">Section 3</a>
        <a href="#section4">Section 4</a>
        <a href="http://google.com">External Link</a>
    </div>
    <div id="section1" class="section"></div>
    <div id="section2" class="section"></div>
    <div id="section3" class="section"></div>
    <div id="section4" class="section"></div>

Answer 3

Answer №2

One way to achieve this is by utilizing the jQuery stop() Method

 $(".links a").click(function (e) {
  var hrefLink =  $(e.target).attr("href");
  var  hrefSplitted = hrefLink.split("#");
  if(hrefSplitted.length == 2){ 
     e.preventDefault();
  };
           /* if(! $(e.target).is('.links a:last') ){ 
               e.preventDefault();
             }*/
            
             $("html, body").stop();
            $("html, body").animate({
                scrollTop: $($(this).attr("href")).offset().top
            }, 1400)
        })

.links{
                width:600px;
                position:fixed;
                top:0;
                padding:20px;
            }
            .links a{
                display:inline-block;
                padding:10px 20px;
                border:1px solid #0094ff;
            }
            .section{
                width:400px;
                height:200px;
                margin:300px auto 600px;
                background-color:#0094ff;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="links">
        <a href="#section1">Section 1</a>
        <a href="#section2">Section 2</a>
        <a href="#section3">Section 3</a>
        <a href="#section4">Section 4</a>
        <a href="http://google.com">External Link</a>
    </div>
    <div id="section1" class="section" style="background:red;"></div>
    <div id="section2" class="section"  style="background:blue;"></div>
    <div id="section3" class="section" style="background:green;"></div>
    <div id="section4" class="section" style="background:yellow;"></div>

Answer 4

One way to achieve this is by utilizing the jQuery stop() Method

 $(".links a").click(function (e) {
  var hrefLink =  $(e.target).attr("href");
  var  hrefSplitted = hrefLink.split("#");
  if(hrefSplitted.length == 2){ 
     e.preventDefault();
  };
           /* if(! $(e.target).is('.links a:last') ){ 
               e.preventDefault();
             }*/
            
             $("html, body").stop();
            $("html, body").animate({
                scrollTop: $($(this).attr("href")).offset().top
            }, 1400)
        })

.links{
                width:600px;
                position:fixed;
                top:0;
                padding:20px;
            }
            .links a{
                display:inline-block;
                padding:10px 20px;
                border:1px solid #0094ff;
            }
            .section{
                width:400px;
                height:200px;
                margin:300px auto 600px;
                background-color:#0094ff;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="links">
        <a href="#section1">Section 1</a>
        <a href="#section2">Section 2</a>
        <a href="#section3">Section 3</a>
        <a href="#section4">Section 4</a>
        <a href="http://google.com">External Link</a>
    </div>
    <div id="section1" class="section" style="background:red;"></div>
    <div id="section2" class="section"  style="background:blue;"></div>
    <div id="section3" class="section" style="background:green;"></div>
    <div id="section4" class="section" style="background:yellow;"></div>

Answer 5

Answer №3

In this example, using e.preventDefault() will prevent a link from following the URL:

$(".links a").click(function (e) {
    e.preventDefault();
});

However, using e.preventDefault() can lead to an issue with external links. To address this, you need to check if the href attribute starts with "#" before calling e.preventDefault():

$(".links a").click(function (e) {
    if ($(this).attr("href").charAt(0) == "#") {
        e.preventDefault();
    }
});

If you want to open external links in a new tab, you can do so by checking and setting the target attribute:

$(".links a").click(function (e) {
    if ($(this).attr("href").charAt(0) == "#") {
        e.preventDefault();
    } else {
        $(this).attr("target", "_blank");
    }
});

To prevent multiple clicks, use the stop() method. Here is the final code snippet:

The final code:

$(".links a").click(function (e) {
            if (this.getAttribute("href").charAt(0) == "#") {
                e.preventDefault();
                $("html, body").stop();
                $("html, body").animate({
                    scrollTop: $($(this).attr("href")).offset().top
                }, 1400)
            }
             else {
            $(this).attr("target","_blank")
        }
})

.links{
  width:600px;
  position:fixed;
  top:0;
  padding:20px;
}
.links a{
  display:inline-block;
  padding:10px 20px;
  border:1px solid #0094ff;
}
.section{
  width:400px;
  height:200px;
  margin:300px auto 600px;
  background-color:#0094ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="links">
    <a href="#section1">Section 1</a>
    <a href="#section2">Section 2</a>
    <a href="http://google.com" target="_blank">External Link</a>
    <a href="#section3">Section 3</a>
    <a href="#section4">Section 4</a>
</div>
<div id="section1" class="section"></div>
<div id="section2" class="section"></div>
<div id="section3" class="section"></div>
<div id="section4" class="section"></div>

Answer 6

In this example, using e.preventDefault() will prevent a link from following the URL:

$(".links a").click(function (e) {
    e.preventDefault();
});

However, using e.preventDefault() can lead to an issue with external links. To address this, you need to check if the href attribute starts with "#" before calling e.preventDefault():

$(".links a").click(function (e) {
    if ($(this).attr("href").charAt(0) == "#") {
        e.preventDefault();
    }
});

If you want to open external links in a new tab, you can do so by checking and setting the target attribute:

$(".links a").click(function (e) {
    if ($(this).attr("href").charAt(0) == "#") {
        e.preventDefault();
    } else {
        $(this).attr("target", "_blank");
    }
});

To prevent multiple clicks, use the stop() method. Here is the final code snippet:

The final code:

$(".links a").click(function (e) {
            if (this.getAttribute("href").charAt(0) == "#") {
                e.preventDefault();
                $("html, body").stop();
                $("html, body").animate({
                    scrollTop: $($(this).attr("href")).offset().top
                }, 1400)
            }
             else {
            $(this).attr("target","_blank")
        }
})

.links{
  width:600px;
  position:fixed;
  top:0;
  padding:20px;
}
.links a{
  display:inline-block;
  padding:10px 20px;
  border:1px solid #0094ff;
}
.section{
  width:400px;
  height:200px;
  margin:300px auto 600px;
  background-color:#0094ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="links">
    <a href="#section1">Section 1</a>
    <a href="#section2">Section 2</a>
    <a href="http://google.com" target="_blank">External Link</a>
    <a href="#section3">Section 3</a>
    <a href="#section4">Section 4</a>
</div>
<div id="section1" class="section"></div>
<div id="section2" class="section"></div>
<div id="section3" class="section"></div>
<div id="section4" class="section"></div>

Fade in animation when scrolling

Answer №1

Answer №2

Answer №3

Similar questions

Customizing hyperlink styles with JavaScript on click

What is the process for combining JSON objects using the "id" key as the basis for merging

A recent challenge encountered with JavaScript involving incrementation

Capturing user input by detecting the Enter key using jQuery

Unable to import an empty class, encountered error TS2307: Module 'menu' not found

Mastering the art of chaining promises in Mongoose

Modify a Google Docs script for use in Google Sheets

Create an HTML table using data from a Python dictionary

Tips for accessing the FormControlName of the field that has been modified in Angular reactive forms

Tips for confirming a sub string is present in an array using JavaScript/TScript

Trouble with top attribute functionality within animate function

Update a roster with AJAX following the addition or removal of a user

Page cannot be adjusted to fit the viewport

Plugin for controlling volume with a reverse slider functionality

Why ASP .NET MVC's AJAX BeginForm InsertionMode.Replace feature is causing issues

Utilize CSS to format the output of a script embedded within

Identifying the selected element with jQuery

Using regular expressions, you can locate and replace the second-to-last instance of a dot character in an email address

Mapping memory for FirefoxOS is like equivalent strides

What steps should I follow to update this React Navigation v5 code to v6?