Discovering the window scroll unit when clicking, as a page smoothly transitions to the top for a specified target position

Is there a way to achieve parallax scrolling on window scroll and navigation click simultaneously? When navigating and animating the page to the top to show the target, I also want to get the window scroll unit.

How can I obtain the window scroll unit on click while the page is animating to the target position at the top?

// By using this code snippet, my aim is to retrieve the window scroll unit //

$glob(document).ready(function() {
    $glob("#lookbook_navi a").bind("click",function(event){
        event.preventDefault();
        var target = $glob(this).attr("href");

        var objWindow = $glob(window);

        $window = $glob(window);
        alert($window.scrollTop()); 

        $glob("#page").animate({
            "top": -($glob(target).position().top)
        }, animSpeed);
    });
});

// Utilizing this code to determine the window scrolling unit ///

$glob(document).ready(function(){
    // Cache the Window object
    $window = $glob(window);

    $glob('div[data-type="lookBookTab"]').each(function(){
        var $bgobj = $glob(this); // assigning the object

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

            // Scroll the background at var speed
            // the yPos is a negative value because we're scrolling it UP!                              
            var yPos = -($window.scrollTop() / $bgobj.data('speed')); 

            // Put together our final background position
            var coords = '50% '+ yPos + 'px';

            // Move the background
            $bgobj.css({ backgroundPosition: coords });

        }); // window scroll Ends
    }); 
});

Answer №1

Give this a shot

$('a[href^="#"]').click(function (e) {
        e.preventDefault();
        var target = this.hash,
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 500, 'swing', function () {
            window.location.hash = target;
        });
    });

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

Using Laravel, I have managed to pass the start and end price range through an ajax get request, but I am facing difficulties in returning it correctly

Array Result after selecting price rangeWhen attempting to retrieve products based on the specified price range, I call the controller function with the input values: <script> function send(){ var start = $('#amount_start').val(); var ...

In PATCH requests, JSON data is not transmitted through Ajax

I'm attempting to send JSON data from the client to my server with the following code: $.ajax({ url : 'http://127.0.0.1:8001/api/v1/pulse/7/', data : data, type : 'PATCH', contentType : 'application/json' ...

Adding a data attribute to a Material-UI Button: A step-by-step guide

I'm trying to include a custom data attribute in the Material-UI Button Component as shown here. Here's what I attempted: <Button inputProps={{ 'data-testid'='clickButton' }} > Click </Button However, this approach ...

Which is better for AJAX file uploads: Multipart or base64 encoding?

I am currently developing a single page application using EmberJS and have come across the task of uploading multiple files. To address this, I created a custom view that encapsulates the file input field functionality, allowing me to link the selected fi ...

Scrolling horizontally in vue-chartjs-chartwidget

I have a question regarding vue-chartjs. I am looking to achieve a similar result to the one demonstrated in this jsfiddle example: http://jsfiddle.net/mbhavfwm/ Below is the code for my Vue.js component (Chart data is passed through params). &l ...

Navigating and interacting with dynamically loaded content received through Ajax requests

I'm facing a challenge in binding to content loaded via Ajax and then traversing through it to detect any newly added elements. The current jQuery code I have is as follows: jQuery(document).ready(function($) { $(document).find('.my-selecto ...

Is there a way to retrieve the ID by using the autocomplete feature to search for a user's first name and last name in PHP

Check out this code from index.php (all credit to the original owner): <HTML> <HEAD> <TITLE> Ajax php Auto Suggest </TITLE> <link href="css/style.css" rel="stylesheet" type="text/css"> <SCRIPT LANGUAGE="JavaScript ...

Having trouble finding errors in Python using Selenium?

I encountered an error while using selenium in conjunction with python: selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":"/html/body/main/article/section/form/div[1]/div[2]/ ...

Is there a way to determine the dimensions of an HTML element? (taking into account added elements)

It seems that the current situation is not feasible at this time. I am working on an animation that requires an element to move from an absolute position to an inline one. The challenge is that I cannot predict how the container or the element itself will ...

The hover effects cease before the cursor is even shifted

Can someone explain why the hover effect stops before the mouse is moved off the element? I implemented the hover effect on a before pseudo element. ...

Troubleshooting: Datatables column filtering not functioning properly

Big shoutout to Stryner for sharing his code on how to disable a search/filter on a specific column in a datatable. It was exactly what I needed. However, I'm facing an issue where the inputs in the bottom TH cells are not triggering any action on bl ...

What is the best way to position my Jchartfx area graph below my gridview?

When my page loads, the graph appears like this. It consistently shows up in the top left corner even though it should be positioned underneath the grid view as intended. var chart1; function createGraph(mpy) { if (mpy == undefined) mpy = 12.00; ch ...

Clicking the checkbox does not synchronize with the table row

Is there a way to activate the button when the user selects the checkbox directly? Currently, the button only becomes enabled when the user clicks on a table row that is clickable. var btn = $("#btn"); btn.attr("disabled","disabled"); $("#table tbo ...

Tips on sending an image to a WebMethod through jQuery

I have a WebMethod in ASP.NET that looks like this. [WebMethod] public static void AddCameraImage(string imageArray) { //do something } Currently, I am trying to read an image from a canvas element and then POST it to the above met ...

AngularJS App disrupted due to Direct Link to URL containing route parameters

Having an issue with direct links to pages containing a parameter. While links from the page itself work, accessing the page directly or refreshing it causes it to break and not load anything. This problem is occurring within a blog application I am develo ...

Wrapping an anchor tag with a div in Codeigniter

Can a div tag be used inside an anchor function? I have a div with the following CSS: #first{ opacity:0; } Now, I want to include it in my anchor element. Here is the code snippet: <?php if(is_array($databuku)){ echo '<ol>&l ...

Utilize client-side script in nodejs to share module functionalities

I created a function within the user controller module to verify if a user is logged in on the site: exports.isLoggedIn = function(req, res, next) { if (req.user) { return true; } else { return false; } }; I'm unsure of h ...

I am attempting to extract data from the website by utilizing the correct CSS selectors, however, I continue to receive results suggesting that the element is not present

Struggling to create a bot for my own services, but encountering crashes when trying to run it. login_button = WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.CSS_SELECTOR, "//div[@class='loginRegisterButtons sb- ...

Displaying a list of data separately in rows using React JS

I am encountering an issue with React Js. I need to display names data in individual rows. const names = ['James', 'John', 'Paul', 'Ringo']; Here is my code: return ( <div class="col-lg-8 bar-name"> ...

Leverage the power of MySQL data in conjunction with jQuery

I am looking to create a featured content slider using jQuery to showcase data from a mySQL table at two different events. Here is the link to my fiddle: http://jsfiddle.net/silcon_sys/8PMUg/65/. I want to display the data including cover, year, label, art ...