Stop a div at a specific point with this unique jQuery plugin

I am looking to implement a similar feature on my website that can be seen here:

The desired functionality is when a link stops at a certain point while scrolling, and upon clicking the link it smoothly scrolls to a designated div. Additionally, as you scroll within the target div, the corresponding link becomes active.

Does anyone know of a jQuery plugin that can achieve this?

Thank you!

Answer №1

For a practical demonstration, check out this code snippet

            <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
            <ul id="menu-header-menu" class="">
                <li id="menu-item-14" class=" menu-item-14"><a href="#About">About</a></li>
                <li id="menu-item-15" class=" menu-item-15"><a href="#Mission">Mission</a></li>
                <li id="menu-item-16" class=" menu-item-16 active"><a href="#service">Services</a></li>
                <li id="menu-item-17" class=" menu-item-17"><a href="#team">Team</a></li>
                <li id="menu-item-18" class=" menu-item-18"><a href="#community">Community</a></li>
            </ul>
            </div>

            <div class="" id="About">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.  
            </div>
            <div class="" id="Mission">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            <div class="" id="service">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </div>
            <div class="" id="team">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </div>
            <div class="" id="community">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </div>


            <script>
            $(document).on('click', 'a[href^="#"]', function(e) {
                var id = $(this).attr('href');
                var $id = $(id);
                if ($id.size() === 0) {
                    return;
                }
                e.preventDefault();
                var pos = $(id).offset().top;
                pos = pos-95;   
                $('body, html').animate({scrollTop: pos});
            });

            </script>

Answer №2

Here is the code snippet you can use to create a menu with smooth scrolling:

HTML

Define the menu links:

<a href="javascript:void(0)" class="scroll-bottom" data-scrolltarget="#target_div_id1">section 1</a>
<a href="javascript:void(0)" class="scroll-bottom" data-scrolltarget="#target_div_id2">section 2</a>
<a href="javascript:void(0)" class="scroll-bottom" data-scrolltarget="#target_div_id3">section 3</a>

Create container divs for sections:

<div id="target_div_id1"> ....Section 1 Description... </div>
<div id="target_div_id2"> ....Section 2 Description... </div>
<div id="target_div_id3"> ....Section 3 Description... </div>

Add jQuery code for smooth scrolling effect:

$(".scroll-bottom").click(function() {
    var targetId = $(this).data('scrolltarget');
    $('html, body').animate({
        scrollTop: $(targetId).offset().top - 45
    }, 1000);
});

Give it a try and let me know if it works as expected!

Answer №3

Forget about using a plugin, you can achieve this easily with just jQuery.

$("#scrollButton").click(function() {
    $('html, body').animate({
        scrollTop: $("#contentContainer").offset().top
    }, 1500);
});

I don't understand why I received negative feedback for this solution. Here is a straightforward example that gets the job done effectively. JSFiddle

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The value of a variable decreases upon being utilized in an Ajax API call

My tempid variable seems to lose some of its values when passed into the second API call. Despite logging the variable to console (console.log(tempid)) where it appears fine, once placed in the API call it only retains some of its value. I'm uncertain ...

Enhance user experience with dynamic color changes in JavaScript

Looking to create a navigation menu with unique colors for each selected state? Check out the code below! After searching extensively, I stumbled upon this snippet. While it only includes one selected state, you can easily customize it for three different ...

There seems to be an issue with sending multiple parameters correctly in the get method when using Angular 5 with a Node.js backend

I have been working on creating an API with nodejs and trying to access it using the GET method by sending parameters through Angular 5 GET method. While testing the API with Postman, everything works fine, but when I try to send the GET request from Angul ...

Is there a way to send GET and POST requests without redirection in a Node/Express application?

Hello everyone, I am new to Node/Express and currently working on an application using Express. I have a button that I want to click in order to save my data into a MongoDB database. However, I do not want this request to be sent to a specific end-point. ...

Issue with saving cookie from Express.js backend to Nuxt.js frontend

After successfully creating an authorization server using Express.js, I encountered a problem when trying to save the access and rotating refresh tokens as signed cookies. The issue arose from having separate backend and frontend servers with different dom ...

Unexpected behavior from flexbox layout

So I've been experimenting with Chrome lately. I created a div with display: -webkit-box;. Inside this div, there are 7 other divs all set to -webkit-box-flex: 1;. Oddly enough, the first div is smaller than the rest. Any ideas on why this might be ...

A problem arises in Next.js when CSS is not rendering properly during Server Side Rendering

After creating my next.js application using the command npx create-next-app, I realized that the styles from the imported .css files are rendering correctly on Client Side Render but not on Server Side Render. The Next.js documentation states that importe ...

Obtaining Data from PHP using jQuery AJAX

Currently utilizing the ajax function in Jquery to retrieve values from a PHP script using the json_encode function. However, the data being returned is riddled with slashes, quotes, and \r\n. It appears that there may be an issue with stripslash ...

Retrieve the value of a specific key from the previous state object using the useState hook

I've searched exhaustively on stack overflow, but couldn't find a similar solution. I need to update an object key-value pair without using the old value. Let's consider a graph declared using useState: const [graphBounds, setGraphBounds] ...

Here is a way to display the chosen option from a list using Angular Js

Seeking guidance on Angular.Js - I have a dropdown that successfully picks the selected data, but fails to display the selected value upon revisit. Is there a specific property I should set for this functionality? Snippet of my code: <select class=& ...

Utilizing Jquery UI's autocomplete feature with data fetched from a

I am new to JavaScript and recently came across an autocomplete tutorial that works well. However, the autocomplete script is currently set up to handle multiple values from a database. It adds a comma after each keyword and then searches for a new keyword ...

Determining if an object is visible on the screen (with no reliance on scrollbars)

Is there a way to optimize rendering on a website by only displaying elements on the screen and rendering others when they are in view? Similar to 3D culling, but for a website ^.^ [update] Is it not feasible to achieve this effect? [update2] I experim ...

Local storage has the limitation of being able to store only a single object at a time, rather

This code is designed to store product details in a local storage variable whenever a user visits a product page, with the intention of remembering the last visited products. However, the variable currently only retains one product at a time instead of add ...

Creating dynamically generated routes in Angular or Angular 9 before initialization

I'm currently working on a project where I am in the process of converting an AngularJS application to Angular. The main challenge that I am facing at the moment revolves around routing. To sum it up: My requirement is to define routes based on an AP ...

"Enhancing user experience with JQuery and MVC4 through efficient multiple file uploads

Currently, I'm facing a challenge in uploading multiple files alongside regular form data. While I had successfully implemented this functionality in PHP before, I am now attempting to achieve the same in ASP.NET MVC4 using C#. Below is the HTML form ...

PHP - Troubleshooting problems with file downloads

Having some frustrating issues with a website that I'm working on. Basically, the problem arises when a user fills out a form and jQuery then processes all the information to sendfile.php. The goal is for the user to automatically download a specific ...

Unveiling the Secrets of Unearthing Data from JSON

My code receives JSON strings through a JSONP call. Although I'm aware of the general JSON structure, I don't know the specific keys and values it will contain. The typical structure is as follows: [ {"key_name": "value"}, {"key_name": ...

Using Javascript/JQuery to attach a javascript object to a form in order to perform a traditional form

On a page, there is a form that consists mostly of plain HTML. One section of the form creates a quite complex multidimensional object using JavaScript. Usually, if I wanted to include a variable in the POST request, I would add an <input type="hidden" ...

Retrieving .js file from cache during jQuery.html() execution

Whenever I use a JavaScript file to make a call through jQuery's ".html" function, the URL gets mapped in a way that forces the JavaScript file to refresh. For example: $(".r").html(data+'<script text="text/javascript" src="http://../test.js" ...

Unpacking and reassigning variables in Vue.js 3 using TypeScript

I am working with a component that has input parameters, and I am experimenting with using destructuring assignment on the properties object to reassign variables with different names: <script setup lang="ts"> const { modelValue: isSelected ...