Adjust the scrollTop of the tab-content when navigating between different tabs

Question

Adjust the scrollTop of the tab-content when navigating between different tabs

When I scroll through the content of menu1 and then click on the menu2 tab, the content for the menu2 tab is displayed. However, I am facing an issue with changing the scroll position of the tab content so that it is visible from the top.

I attempted to use javascript, but encountered a specific problem.

.nav-tabs{
  background:#f1f1f1;
  position: sticky;
  top: 56px;
  z-index:9999;
}
body{
  width:400px;
  height:300px;
  overflow:scroll;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<body>

<div class="container">
  <h2>Dynamic Tabs</h2>

  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
  </ul>

  <div class="tab-content">
    <div id="menu1" class="tab-pane fade in active">
      <h3>Menu 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Curabitur fringilla ex ut lorem molestie, quis hendrerit neque consequat.
      Donec et enim vitae purus condimentum pretium ac vel ante.
      Quisque posuere arcu nec mi aliquam tincidunt.
      Nullam blandit ultricies est ac vulputate.
      Nam non risus non nunc fermentum bibendum eget vel sem.Sed semper magna urna.
      Fusce iaculis justo metus, a viverra tortor facilisis at.
      Nullam ornare volutpat nisl, sed cursus libero dapibus eu.
      Integer mollis metus sed justo consectetur, non laoreet odio convallis.
      Sed lobortis velit lacus, vel bibendum dui eleifend sit amet.
      Morbi pulvinar nunc lacus, sollicitudin accumsan sapien imperdiet eu.
      Aenean luctus nisi a orci tempus suscipit.Quisque pharetra sagittis mattis.Suspendisse potenti.
      Etiam dignissim efficitur ligula, at dictum orci vestibulum rhoncus.
      Proin faucibus felis massa, eu malesuada erat commodo ac.
      Cras congue tellus augue, a vehicula turpis tristique in.Duis sodales mauris diam!
      Ut pellentesque eros non maximus elementum.Mauris finibus porttitor rutrum?
     </p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque

     </p>
    </div>
  </div>
</div>

</body>

javascript html css bootstrap-4

Answer 1

Answer №1

To ensure the page scrolls to the top when a menu item is clicked, simply assign a class to each menu item, such as menu-item, and then employ jQuery's scrollTop(0) function on any menu item click event using the following snippet:

$(".menu-item").click(function() {
    $("html, body").scrollTop(0);
});

For a demonstration of this in action with your own code, check out: https://jsfiddle.net/Matthew_/L8hdbx7v/10/

If you prefer not to rely on jQuery, an alternative approach is to use:

window.scrollTo(x-value, y-value);

Answer 2

To ensure the page scrolls to the top when a menu item is clicked, simply assign a class to each menu item, such as menu-item, and then employ jQuery's scrollTop(0) function on any menu item click event using the following snippet:

$(".menu-item").click(function() {
    $("html, body").scrollTop(0);
});

For a demonstration of this in action with your own code, check out: https://jsfiddle.net/Matthew_/L8hdbx7v/10/

If you prefer not to rely on jQuery, an alternative approach is to use:

window.scrollTo(x-value, y-value);

Answer 3

Answer №2

Creating this with JavaScript is a breeze.

Check out this example I put together and let me know what you think:

$(window).scroll(function(e){
 var tabs = $(".nav-tabs");
 var height = $(window).scrollTop();
 var pos =tabs[0].getBoundingClientRect(); 
 if (pos.top + pos.height < height)
     tabs.css({ top:0, position: "sticky" }); // make it sticky 
  else tabs.attr("style", ""); // reset to default
});
   // when changing the menu scroll to top. 
$(".nav-tabs li").click(function() {
 window.scrollTo(0,0);
 var pos= $(".nav-tabs")[0].getBoundingClientRect(); 
 window.scrollTo(0, (pos.top + pos.height))
   });

.nav-tabs{
  background:#f1f1f1;
  top: 56px;
  z-index:9999;
}
body{
  width:400px;
  height:300px;
  overflow:scroll;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<body>

<div class="container">
  <h2>Dynamic Tabs</h2>

  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
  </ul>

  <div class="tab-content">
    <div id="menu1" class="tab-pane fade in active">
      <h3>Menu 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris euismod leo at nisi tempor, nec volutpat lacus ultricies.
      Nam tristique urna mauris, id tempus turpis feugiat vel. Curabitur at finibus mi. Etiam nec neque velit.
      Suspendisse potenti. Proin ut quam faucibus, sollicitudin nisl sed, tincidunt sem. Pellentesque nec orci vitae justo fringilla aliquet imperdiet ac nulla.
      Fusce vehicula massa est, eget scelerisque ex efficitur quis. Quisque non purus hendrerit, vestibulum augue at, placerat orci.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Vivamus pretium metus ligula, sit amet fermentum eros rutrum et. Phasellus varius dignissim libero,
      id mollis tortor commodo ac. Integer interdum diam eleifend sapien rhoncus suscipit. Ut vulputate blandit dapibus.
      Duis vitae elementum enim. In hac habitasse platea dictumst. Sed sit amet lectus ante. Fusce faucibus sodales ipsum nec pellentesque.
      Donec auctor nibh quis diam malesuada, at viverra nunc cursus. Aenean convallis maximus odio in condimentum.
      Curabitur bibendum magna facilisis, accumsan augue at, congue lorem. Vestibulum pharetra pulvinar neque, ac venenatis velit convallis gravida. Nullam dictum mattis consequat.
      Maecenas sagittis dui ut vestibulum gravida. Mauris nec eros fermentum, hendrerit dolor molestie, egestas nisi.
      Nam in felis run ut[/KEYWORD]&, dictum risus arcu. Aliquam quis varius turpis.</p>
    </div>
  </div>
</div>

</body>

Answer 4

Creating this with JavaScript is a breeze.

Check out this example I put together and let me know what you think:

$(window).scroll(function(e){
 var tabs = $(".nav-tabs");
 var height = $(window).scrollTop();
 var pos =tabs[0].getBoundingClientRect(); 
 if (pos.top + pos.height < height)
     tabs.css({ top:0, position: "sticky" }); // make it sticky 
  else tabs.attr("style", ""); // reset to default
});
   // when changing the menu scroll to top. 
$(".nav-tabs li").click(function() {
 window.scrollTo(0,0);
 var pos= $(".nav-tabs")[0].getBoundingClientRect(); 
 window.scrollTo(0, (pos.top + pos.height))
   });

.nav-tabs{
  background:#f1f1f1;
  top: 56px;
  z-index:9999;
}
body{
  width:400px;
  height:300px;
  overflow:scroll;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<body>

<div class="container">
  <h2>Dynamic Tabs</h2>

  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
  </ul>

  <div class="tab-content">
    <div id="menu1" class="tab-pane fade in active">
      <h3>Menu 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris euismod leo at nisi tempor, nec volutpat lacus ultricies.
      Nam tristique urna mauris, id tempus turpis feugiat vel. Curabitur at finibus mi. Etiam nec neque velit.
      Suspendisse potenti. Proin ut quam faucibus, sollicitudin nisl sed, tincidunt sem. Pellentesque nec orci vitae justo fringilla aliquet imperdiet ac nulla.
      Fusce vehicula massa est, eget scelerisque ex efficitur quis. Quisque non purus hendrerit, vestibulum augue at, placerat orci.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Vivamus pretium metus ligula, sit amet fermentum eros rutrum et. Phasellus varius dignissim libero,
      id mollis tortor commodo ac. Integer interdum diam eleifend sapien rhoncus suscipit. Ut vulputate blandit dapibus.
      Duis vitae elementum enim. In hac habitasse platea dictumst. Sed sit amet lectus ante. Fusce faucibus sodales ipsum nec pellentesque.
      Donec auctor nibh quis diam malesuada, at viverra nunc cursus. Aenean convallis maximus odio in condimentum.
      Curabitur bibendum magna facilisis, accumsan augue at, congue lorem. Vestibulum pharetra pulvinar neque, ac venenatis velit convallis gravida. Nullam dictum mattis consequat.
      Maecenas sagittis dui ut vestibulum gravida. Mauris nec eros fermentum, hendrerit dolor molestie, egestas nisi.
      Nam in felis run ut[/KEYWORD]&, dictum risus arcu. Aliquam quis varius turpis.</p>
    </div>
  </div>
</div>

</body>

Answer 5

Answer №3

If I had to choose, I would adjust the scrollTop property of either:

the tab-content element
the window content

Since the menu-item is part of (and likely set to display: block) the parent element, setting scrolltop on this element may not achieve the desired effect.

In plain JavaScript, you can use element.scrollTop = value; https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

Answer 6

If I had to choose, I would adjust the scrollTop property of either:

the tab-content element
the window content

Since the menu-item is part of (and likely set to display: block) the parent element, setting scrolltop on this element may not achieve the desired effect.

In plain JavaScript, you can use element.scrollTop = value; https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

Adjust the scrollTop of the tab-content when navigating between different tabs

Answer №1

Answer №2

Answer №3

Similar questions

Transmitting chosen option using AJAX and JavaScript

When printing a PDF, a div that is set to 100vh only takes up

Creating a recursive function in JavaScript to build a menu list object

The image begins rotating only after the second click has been made

Enable the use of multiple decimal separators in a ReactJS application

I am puzzled by this error in Typescript: "Why does the element have an 'any' type when the Object type lacks an index signature?"

I wonder about the origin of this variable

Transforming JSON into a specialized text structure

Localizing strings that are not saved in a database

Achieve SEO excellence with Angular 4 in production settings

Beginner guides on creating combo boxes and Facebook-style message composers using CSS and Javascript (or JQuery)

How to Implement Infinite Scrolling in Ionic Framework Using HTTP Requests

Is there a way to horizontally center Material UI Switch and its icon props?

Break apart animation similar to the 🎊 emoji using CSS styling

Tips for effectively utilizing vue-draggable (or Sortable JS) within a v-data-table using the powerful combination of Vuetify 2 and Vue JS 2

Update the contents of a neighbor div within the same parent element using jQuery

The ideal login page design

Accessing node postgres and fetching combined fields with duplicate names

Using JavaScript to organize and categorize data within an array

Managing the size of personalized shapes in Three.js