Jquery scroll animation not reaching the intended position when scrolling upwards

While developing a new feature for my music player, I encountered an issue with centering the track/div upon clicking in the scrollable parent div. Sometimes it doesn't scroll to the center as intended and instead scrolls erratically to the top of the same spot when navigating down and selecting a lower track. The goal of this feature is to provide users with a seamless experience when exploring tracks, eliminating the need for manual scrolling and improving overall user experience. Can anyone offer suggestions on how to ensure that when a track is clicked, it smoothly scrolls to and vertically centers the track in the middle of the parent div? (This functionality will also be extended to the next and prev buttons, as demonstrated in the live demo)

Live Demo: 

$(".playbox").on('click', function () {
      if (!$(this).hasClass('playboxplaylight') && $(this) !== nowplay) {$('.scrollit').animate({
        scrollTop: $(this).offset().top - $(this).height() 
    },1000);}
jqueryhtmlcss

Answer №1

It seems that the issue with your scroller not scrolling to the correct position is caused by the scroll plugin being used.

The plugin in question disables the native scroll functionality and instead uses translate for smoother scrolling, which can lead to incorrect values being returned by jQuery's .offset() function.

To ensure you get the right values, you can try the following solution:

$(".playbox").on('click', function () {
    // Your if checks here
    $('.scrollit').animate({
    scrollTop: $(this)[0].offsetTop - $(this).height() 
    },1000);
})

However, even with the above code, the scrolling may still not be perfectly centered at the desired pixel. To address this, you will need to subtract the heights of the top bar and bottom bar as well.

$(".playbox").on('click', function () {
    // Your if checks here
    $('.scrollit').animate({
    scrollTop: $(this)[0].offsetTop - $(this).height() - ($('.menu-search-box').height() + $('.play-bar').height())
    },1000);
})

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

Share JSON data across functions by calling a function

I am currently working on a project where I need to load JSON using a JavaScript function and then make the loaded JSON objects accessible to other functions in the same namespace. However, I have encountered some difficulties in achieving this. Even after ...

javascriptjqueryjson

Adjusting the position of the parent div by manipulating the bottom property

Is there a way to toggle the bottom property of a div when clicking its child anchor tag? <div class="nav" :class="{ 'full-width': isFullWidth }"> <a class="toggle-button" @click="toggleNav"><i class="fa fa-angle-down">< ...

javascriptjqueryhtmlcss

jQuery does not have the capability to add or remove classes

I am currently using Vue.js within Laravel, and in the watch action, I am utilizing jQuery. I am puzzled as to why hasClass is functioning correctly, but addClass, removeClass, and toggleClass are not working as expected. Here is a snippet of my HTML cod ...

jqueryvue.js

The process of redirecting a web page using htaccess and incorporating URL parameters

I have a directory where I store HTML pages. Using the PHP include function, I am adding these pages to my index.php file by referencing them with a URL parameter value. The URL parameter "xpage" corresponds to the page names stored in another folder, whil ...

phphtml.htaccess

Looking to personalize the appearance of an iframe using CSS styling?

I am working with an iframe that generates a form, and I would like to customize the CSS of this form. How can I go about editing the CSS? <div class="quiz-container" style="text-align: center;" data-quiz="#######" data-pr ...

javascripthtmljquerycssiframe

CSS - starting fresh with animations

I am facing an issue with a CSS animation that I created. Everything seems to be working correctly, but I need to complete it by setting the input type to reset the animation. Below is the CSS code snippet that should reset the animation: $('button& ...

javascriptjquerycssanimationreset

When the user clicks, display one div and conceal the others

https://codepen.io/leiacarts/pen/PoqRxNZ I need assistance with two specific tasks related to my website layout. Firstly, I am struggling to ensure that images displayed in the red sections remain constrained and automatically resize within the content di ...

javascriptjquerycss

css - aligning text below another text in the center

Looking to style a text in a specific color with a message about another text below it? Want the text centered but not sure how to position it correctly? margin: 0px auto; If this code isn't delivering the desired result and is positioning your text ...

csscenter

Having trouble encoding PHP array in jQuery

I am struggling to find the index in a JSON array. The browser is displaying undefined data. I have posted the code snippets below. Here is my PHP encoded array: [{"voo_Cod":"1","voo_CidadeOrigem":"1","voo_CidadeDestino":"2","voo_Data":"2015-07-13 07:00: ...

javascriptphpjqueryjson

Exploring Angular's filtering capabilities and the ngModelChange binding

Currently, I am in the process of working on a project for a hotel. Specifically, I have been focusing on developing a reservation screen where users can input information such as the hotel name, region name, check-in and check-out dates, along with the nu ...

htmlangulartypescript

"Click events on jQuery's cloned elements are not retained when the elements are removed and appended to a container for the second time

Take a look at this fiddle: https://jsfiddle.net/L6poures/ item.click(function() { alert("It's functioning") }) $("#container").append(item) var stored = item.clone(true, true) function add_remove() { $("#container").html("") $("#conta ...

javascriptjquery

The cursor image fails to function when entering a specific area within the image

I have implemented a custom cursor using the code snippet below. $("div").css('cursor','url(../graphics/system/mybg.cur),auto'); However, I am experiencing an issue where the cursor reverts to the default pointer when hovering over a ...

jqueryhtmlcsscursor

Stop options from being hidden in a select dropdown using HTML

Can I keep the options visible when a user selects an item in the 'select' dropdown? I want to add more options to the 'select' when the user clicks on the 'op2' item, without closing the list of options. <select> <o ...

javascriptjqueryhtmlselect

Ways to align anchor tags in the middle of a DIV element?

<div style="border: 1px solid rgb(0, 0, 0); height: 30px; width: 30px; background-color: rgb(245, 225, 130);"> <div style="margin: 5px;"> <a href="#link">#down2#</a> </div> </div> This is the current code I am w ...

htmlcss

Adjust the JavaScript variable upon pressing the "c" key

I'm trying to figure out how I can toggle the value of variable x in JavaScript when the key "c" is pressed. Specifically, I want x to change from 0 to 1 when "c" is pressed and revert back to 0 when it's released. I have already defined and name ...

javascripthtmlcssvariablesfrontend

A guide on creating and accessing a variable within a Jinja for loop

Whenever a link is clicked by the user, I would like Jinja to establish a variable known as {{ contact_clicked }} that holds the same value as {{ contact }}. I thought about using <a href="/?{% contact_clicked = contact %}">.....</a> ...

pythonhtmlpython-2.7jinja2

The pull-right feature in Bootstrap 4 seems to be malfunctioning when used in a

Currently, I am utilizing bootstrap 4 for my project. I have encountered an issue with the navbar not aligning correctly on the page, and I'm struggling to identify the root cause of this problem. Is there someone who can provide assistance in resolvi ...

htmlcssbootstrap-4

Using AJAX and Rails to set session variables in the presence of appcache

When making an ajax call to "updateUser," the following code is executed: puts session[:user_id] user = User.find(params[:user_id]) if user session[:user_id] = user.id session[:user_name] = user.first_name + " " + user.last_name puts session[:user_i ...

ruby-on-railsajaxhtmlsessionjquery

Looking for Sha1 encryption functionality in jQuery or JavaScript?

I am currently using sha1 encryption coding in PHP <?php echo hash('sha1', 'testing'.'abcdb'); ?> However, I need this encryption to work on a page named xyz.html, causing the current block of code to not function prop ...

javascriptjquerysha1

Unable to calculate height properly when using the formula height: 70% + 0px

My attempt to set the height of a div element to 70% using CSS3's calc() function has been unsuccessful. While specifying viewport height (70vh) works, I specifically need the height to be 70%. .scroll-inner-container { height: -moz-calc(70vh + 0 ...

jqueryhtmlcsscss-selectors