jQuery mouse scroll event example.jpg

jQuery mouse scroll event example

jQuery mouse scroll event example, JQuery offers a variety of functionality to the user, which has a smooth scroll functionality provided by jQuery. Originally a plugin and used for smooth scrolling on the same page as needed. The name suggests scrolling which means we can scroll the page and see how much scrolling has been done. Smooth scrolling is helpful for users who can read long pages. They can quickly, or we say. That they scroll the page smoothly whatever they like is a big sign of smooth scrolling, as your user points.

$(window).scroll(function() {
}

We have added window object 8 (window) to the event handler function. However, you can use the scroll () method in the event handler function. You can attach any scrollable element (for example, “div”).

jQuery mouse scroll event example

We have a “div” element in the following example, and we use the scroll () method. I have attached this “div” element to the event handler function. When the user scrolls inside this “div” element. Then the scroll counter is updated simultaneously following the “div” element. We calculate how many times the user has scrolled inside the “div” element.

jQuery mouse scroll event example Explain 01

$('#myButton').click(function() {
   $.scrollTo($('#myDiv'), 1000);
});

jQuery scroll event occurs when the user scrolls in the specified element. Scroll Method attaches an Html element to the event handler function, and this event handler function executes. when the user scrolls inside the attached Html element.

jQuery mouse scroll event example Explain 02

<script>
    window.addEventListener('scroll' , ()=>{
        console.log('scrolled .... ');
    } )
</script>

Smooth scroll with jQuery

Here’s the code for scrolling a smooth page from an anchor to a jQuery page. It has some logic to identify these jump links and not target other links. Don’t use that technology for smooth scrolling why accessibility is a concern. For example, if you click on a # hash link. The native behavior of the browser changes the focus on the element that matches that ID.

The page can scroll. But scrolling is a side effect of shifting focus if you override the default focus-change behavior. (Which you need to prevent instant scrolling and enable smooth scrolling). It would help if you managed the focus change yourself.

jQuery mouse scroll event example Explain 03

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);
});

jQuery mouse scroll event example Explain 04

$(window).scroll(function(){
			if ($(this).scrollTop() > 100) {
				$('#scroll-up').fadeIn();
			} else {
				$('#scroll-up').fadeOut();
			}
		});
Smooth scrolling on page load

Sometimes you may want to link a page with an anchor in the URL. For example, suppose I want to direct my viewers to the comments section of another article. Then I can use something like example.com/#comments and expect them. Landing directly in the comments section of the page.

Now, you may want to get context from the audience that they have just landed on that page. That’s where they are, and that’s where smooth scrolling comes in handy. This allows visitors to see exactly where they are on the page. Who is because they will see the page scroll down before landing in a specific section of the page. Landing on a page and scrolling smoothly on the page load anchor. Here is the code you need:

jQuery mouse scroll event example Explain 04

$(window).on("load", function() {
    var anchor = window.location.hash.replace('#', '');
    scrollToAnchor(anchor);
});

function scrollToAnchor(selector){
  const destination = $("a[name='"+ selector +"']");
    $('html,body').animate({
      scrollTop: destination.offset().top
    },'slow');
}

The code is very similar to the previous one. But in this case, before we call our scrollToAnchor function. Waiting for all page contents to load. This is especially important if you have images that take some time to load. Because usually the height of those images is not determined until they are fully loaded Thus, images that have not yet been loaded can be displayed with a height of 0. And only when the image is fully loaded can they reach their final height

Internal linking suggestions

Leave a Reply

Your email address will not be published.