JavaScript function to toggle visibility and scroll back to top of the page

Question

JavaScript function to toggle visibility and scroll back to top of the page

I have been an avid reader on this platform, and I am hoping that my question has not already been addressed. I am struggling to find a solution to a problem I am facing.

There are two DIVs in my code that I toggle between showing and hiding using Javascript.

However, whenever the action is triggered, the page scrolls back to the top. Is there a way to keep the position intact? I have tried switching from visibility to display = 'block' / 'none', but it did not make any difference.

This is the structure of my code:

The two divs that are affected by the script are popup1 and popup2. They both have a position: fixed;. The element class has viewport height.

I believe this information should be sufficient to troubleshoot the issue. If not, please feel free to ask for more details.

Thank you for your assistance!

UPDATE: You can view the JSFiddle here: https://jsfiddle.net/vx6vju3c/2/

javascript jquery html css show

Answer 1

Answer №1

To eliminate the href="#" or modify the <a> tag to <button>

Answer 2

To eliminate the href="#" or modify the <a> tag to <button>

Answer 3

Answer №2

If you apply a min-height property to the element with id #content, it can be beneficial.

#content {
 min-height:100px;
}

Answer 4

If you apply a min-height property to the element with id #content, it can be beneficial.

#content {
 min-height:100px;
}

Answer 5

Answer №3

Modify <a> elements to <buttons>:

<div id="content">
    <div id="popup1">
        <div id="hoverbarnavi">
        <button type="button" onclick="hide('popup1'); show('popup2')">Close</button>
        </div>
        <div id="hoverbarcontent">
            This is Popup 1
        </div>
    </div>
    <div id="popup2">
        <div id="hoverbarnavi">
            <button type="button" onclick="hide('popup2')">Close </button>
        </div>
        <div id="hoverbarcontent">
            This is Popup 2
        </div>
    </div>

  <div class="element">Content 1 goes here</div>
  <div class="element">Content 2 goes here</div>
</div>

The issue arises from having href="#" within the <a> tag, which causes the page to scroll back to the top when clicked.

Answer 6

Modify <a> elements to <buttons>:

<div id="content">
    <div id="popup1">
        <div id="hoverbarnavi">
        <button type="button" onclick="hide('popup1'); show('popup2')">Close</button>
        </div>
        <div id="hoverbarcontent">
            This is Popup 1
        </div>
    </div>
    <div id="popup2">
        <div id="hoverbarnavi">
            <button type="button" onclick="hide('popup2')">Close </button>
        </div>
        <div id="hoverbarcontent">
            This is Popup 2
        </div>
    </div>

  <div class="element">Content 1 goes here</div>
  <div class="element">Content 2 goes here</div>
</div>

The issue arises from having href="#" within the <a> tag, which causes the page to scroll back to the top when clicked.

Answer 7

Answer №4

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Smooth Scroll To Top Demo</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>


    <style>
        .display-container
        {
            position: absolute;
            top: 3rem;
            left: 1rem;
            width: 300px;
        }
        body
{
    background: #eee;
}

.container{
    width:900px;
    margin:30px auto;
    padding:25px;
    min-height:400px;
    height:auto;
}
.container h2 { margin-top:30px;}

.scrollToTop{
    width: 50px;
    height: 50px;
    padding: 10px;
    text-align:center;
    background: whiteSmoke;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    position:fixed;
    bottom: 75px;
    right: 40px;
    display: none;
    background: #000;
}
.scrollToTop:hover{
    text-decoration: none;
}
    </style>
    <script>
    var $ = jQuery.noConflict();
jQuery(document).ready(function( $ ){
    scrollToTop.init( );
});

var scrollToTop =
{
    /**
     * When the user has scrolled more than 100 pixels then we display the scroll to top button using the fadeIn function
     * If the scroll position is less than 100 then hide the scroll up button
     *
     * On the click event of the scroll to top button scroll the window to the top
     */
    init: function(  ){

        //Check to see if the window is top if not then display button
        $(window).scroll(function(){
            if ($(this).scrollTop() > 100) {
                $('.scrollToTop').fadeIn();
            } else {
                $('.scrollToTop').fadeOut();
            }
        });

        // Click event to scroll to top
        $('.scrollToTop').click(function(){
            $('html, body').animate({scrollTop : 0},800);
            return false;
        });
    }
};
    </script>
</head>
<body>




<section class="container">

<h2>Smooth Scroll To Top Demo</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in metus nec mauris egestas laoreet. Integer vehicula velit non massa suscipit at porta sem commodo....</p>

<a href="#" class="scrollToTop">Scroll To Top</a>


</section>


</body>
</html>

Here are the complete solution and very smooth scroll for check copy code make test html file run on browser, scroll down and click on back to top button on right bottom

Answer 8

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Smooth Scroll To Top Demo</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>


    <style>
        .display-container
        {
            position: absolute;
            top: 3rem;
            left: 1rem;
            width: 300px;
        }
        body
{
    background: #eee;
}

.container{
    width:900px;
    margin:30px auto;
    padding:25px;
    min-height:400px;
    height:auto;
}
.container h2 { margin-top:30px;}

.scrollToTop{
    width: 50px;
    height: 50px;
    padding: 10px;
    text-align:center;
    background: whiteSmoke;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    position:fixed;
    bottom: 75px;
    right: 40px;
    display: none;
    background: #000;
}
.scrollToTop:hover{
    text-decoration: none;
}
    </style>
    <script>
    var $ = jQuery.noConflict();
jQuery(document).ready(function( $ ){
    scrollToTop.init( );
});

var scrollToTop =
{
    /**
     * When the user has scrolled more than 100 pixels then we display the scroll to top button using the fadeIn function
     * If the scroll position is less than 100 then hide the scroll up button
     *
     * On the click event of the scroll to top button scroll the window to the top
     */
    init: function(  ){

        //Check to see if the window is top if not then display button
        $(window).scroll(function(){
            if ($(this).scrollTop() > 100) {
                $('.scrollToTop').fadeIn();
            } else {
                $('.scrollToTop').fadeOut();
            }
        });

        // Click event to scroll to top
        $('.scrollToTop').click(function(){
            $('html, body').animate({scrollTop : 0},800);
            return false;
        });
    }
};
    </script>
</head>
<body>




<section class="container">

<h2>Smooth Scroll To Top Demo</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in metus nec mauris egestas laoreet. Integer vehicula velit non massa suscipit at porta sem commodo....</p>

<a href="#" class="scrollToTop">Scroll To Top</a>


</section>


</body>
</html>

Here are the complete solution and very smooth scroll for check copy code make test html file run on browser, scroll down and click on back to top button on right bottom

Answer 9

Answer №5

If you include href="#" in the Anchor tag, it will direct you to the top of the webpage when clicked.

To avoid this behavior, simply remove the href="#" attribute and observe if you prefer not changing the tag to a button.

Answer 10

If you include href="#" in the Anchor tag, it will direct you to the top of the webpage when clicked.

To avoid this behavior, simply remove the href="#" attribute and observe if you prefer not changing the tag to a button.

JavaScript function to toggle visibility and scroll back to top of the page

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

How can you easily reuse an Ajax method in Vue.js by passing a Vue data array name as an argument?

What is the best method for me to filter the values in my array?

Assigning multiple identifiers to a single element

First render does not define useEffect

Having trouble retrieving the $scope value in HTML, even though it was assigned within the success function of $http.post

When the page first loads, there will be isotope gutter and spacing. However, as you resize the window,

Strategies for Updating Backgrounds on Individual WordPress Pages

What is the best method for gracefully opening external links in a reusable new tab?

Is there a way to enable popovers globally and also utilize the container: 'body' option simultaneously?

AngularJS ngAnimate triggering prematurely

Enhancing Next.js with custom CSS for React-Bootstrap components: A step-by-step guide

Extract information from a webpage using JavaScript through the R programming language

Creating a visual selection menu with icon options using jQuery or a similar framework

Using jQuery, add a class for a specified amount of time in milliseconds

Once the save operation is finished, I retrieve the collection from the server. However, since the fetch is asynchronous, the view is rendered before the fetch is fully complete

How can I customize button colors in react-bootstrap components?

How can you handle all HTML tags with Regex in a single line of code?

Making <div> elements responsive by rearranging their display order using CSS in media queries, troubleshooting issues with floats, and adjusting font sizes

How does Code Sandbox, an online in-browser code editor, manage file storage within the browser?

Obtain the range of values for a match from an array using Vue.js