Adjust the browser viewport to the toggled block's position

Question

Adjust the browser viewport to the toggled block's position

I am facing an issue with my ul blocks and buttons that toggle their content. When I click the button to show the content, everything works fine. However, when I scroll down and click the button again to hide the content, the browser screen jumps to the bottom instead of staying at the top of the closed block.

$('.ul' + l).append('<button type="button" onclick="$(this).myFunc()">Button</button>');

           $.fn.myFunc = function () {
           var ul = $(this).parent().attr('class');
           $('.' + ul + ' li:gt(5)').fadeToggle("fast");
                        };

I have tried using $(window).focus and adding

fadeToggle("fast").preventDefault()

, but nothing seems to solve the issue. Any suggestions?

javascript jquery html css

Answer 1

Answer №1

If you're looking for a straightforward solution, one option is to utilize the built-in scrollIntoView() method:

document.querySelector('.ul' + l).scrollIntoView({ 
    behavior: 'smooth' 
});

This functionality is compatible with the latest versions of all major browsers. However, if you require compatibility with older browsers (such as IE 10 and below), you can implement this polyfill.

In response to feedback in the comments: rest assured that you have access to the document object since it's foundational to every web page. If preferred, you can opt for a jQuery selector but remember to retrieve the underlying DOM object before using scrollIntoView because it's not inherently a jQuery method.

$('.ul' + l)[0].scrollIntoView({...});

Answer 2

If you're looking for a straightforward solution, one option is to utilize the built-in scrollIntoView() method:

document.querySelector('.ul' + l).scrollIntoView({ 
    behavior: 'smooth' 
});

This functionality is compatible with the latest versions of all major browsers. However, if you require compatibility with older browsers (such as IE 10 and below), you can implement this polyfill.

In response to feedback in the comments: rest assured that you have access to the document object since it's foundational to every web page. If preferred, you can opt for a jQuery selector but remember to retrieve the underlying DOM object before using scrollIntoView because it's not inherently a jQuery method.

$('.ul' + l)[0].scrollIntoView({...});

Adjust the browser viewport to the toggled block's position

Answer №1

Similar questions

Executing Enter Key and Button Simultaneously with JavaScript: Step-by-Step Guide

jQuery for Dynamic CSS Class

What is the best way to display data retrieved from a GET request in Angular?

How can one identify a concealed glitch that exclusively occurs for a particular individual or hardware in a React environment?

How to specify a single kind of JavaScript object using Typescript

Using jQuery, you can easily apply a new class to a div when it is

Exploring the possibilities of combining Selenium Code and F# with Canopy

In order for Javascript to continue, it must first wait for a request to be completed

Encountering an error of "undefined index" while attempting to submit a form using

Duplicating a concealed div and transferring it to a new div

Variable scope not properly maintained when there is a change in the Firebase promise

How can you use React.js to only display "Loading..." on the page while the full name is included in the URL?

Tips to prevent encountering the "The response was not received before the message port closed" error while utilizing the await function in the listener

What is the best way to ensure that the navigation is properly displayed with Bootstrap 4?

There is a lack of 'Access-Control-Allow-Origin' header - Issue encountered while making Food2Fork API request using AJAX

Is there a way to rewrite HTML by substituting the parent tag with a different tag than the children's tag?

Updating array object properties within nested for loops in JavaScript can be challenging

I am utilizing jQuery's AJAX function with a datatype of HTML to extract a specific portion of the incoming data

Can you explain the meaning of `<%= something %>` to me?

Is there a way to display my WhatsApp number, email, and location using icons?