jQuery Dialog always display at the top of the scrollbar

Question

I have created a jQuery dialog with different content tabs in it with the help of Anonymous's answer ---> Browsing different content in jQuery Dialog

And he has provided me a great solution for what I wanted to achieve.

$(document).ready(function() {
  $('li:first-child, #i1').click(function() {
    $('#main button').css({
      'display': 'inline-block'
    });
    $('#i1').addClass("active");
    $('#i3,#i2').removeClass("active");
    $('#info1').css({
      'display': 'block'
    });
    $('#info2,#info3').css({
      'display': 'none'
    });
  })

  $('li:nth-child(2), #i2').click(function() {
    $('#main button').show();
    $('#i2').addClass("active");
    $('#i1,#i3').removeClass("active");
    $('#info2').css({
      'display': 'block'
    });
    $('#info1,#info3').css({
      'display': 'none'
    });
  })
  $('li:nth-child(3), #i3').click(function() {
    $('#main button').show();
    $('#i3').addClass("active");
    $('#i1,#i2').removeClass("active");
    $('#info3').css({
      'display': 'block'
    });
    $('#info2,#info1').css({
      'display': 'none'
    });
  });

});

#info1,
#info2,
#info3 {
  display: none;
  position: absolute;
  top: 70px;
  background: #454545;
  width: 300px;
  height: 500px;
  color: white;
}
.active {
  background: green;
}
ul li {
  display: inline-block;
  list-style-type: none;
  background: lightblue;
  border: 1px solid black;
}
button {
  display: none;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <ul>
    <li>1nfo</li>
    <li>info2</li>
    <li>info3</li>
  </ul>

  <button id="i1">info1</button>
  <button id="i2">info2</button>
  <button id="i3">info3</button>
  <div id="info1">description of info1</div>
  <div id="info2">description of info2</div>
  <div id="info3">description of info3</div>
</div>

In the description in the id= info1/info2/info3, when I am containing a lot of data in it, the dialog box will have to scroll. So when I scrolled to the bottom of info 1, I clicked to the info2 tab to browse, if then I clicked back to the info1 tab, the description in info1 will still stay on the bottom part, instead of going back to the top part.

So how can I lead my scroll always back to the top when I was clicked on different tabs? Do I need to set up an anchor point or something?

Answer 1

You can use jquery scrollTop. From scrollTop documentation:

Description: Set the current vertical position of the scroll bar for each of the set of matched elements.

scrollTop( value )

value Type: Number

A number indicating the new position to set the scroll bar to.

The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. Setting the scrollTop positions the vertical scroll of each matched element.

I added overflow-y css property to info div, in case if content of the div exceeds it's height.

$(document).ready(function() {
  $('li:first-child, #i1').click(function() {
    $('#main button').css({
      'display': 'inline-block'
    });
    $('#i1').addClass("active");
    $('#i3,#i2').removeClass("active");
    $('#info1').css({
      'display': 'block'
    }).scrollTop(0);
    $('#info2,#info3').css({
      'display': 'none'
    });
  })

  $('li:nth-child(2), #i2').click(function() {
    $('#main button').show();
    $('#i2').addClass("active");
    $('#i1,#i3').removeClass("active");
    $('#info2').css({
      'display': 'block'
    }).scrollTop(0);
    $('#info1,#info3').css({
      'display': 'none'
    });
  })
  $('li:nth-child(3), #i3').click(function() {
    $('#main button').show();
    $('#i3').addClass("active");
    $('#i1,#i2').removeClass("active");
    $('#info3').css({
      'display': 'block'
    }).scrollTop(0);
    $('#info2,#info1').css({
      'display': 'none'
    });
  });

});

#info1,
#info2,
#info3 {
  display: none;
  position: absolute;
  top: 70px;
  background: #454545;
  width: 300px;
  height: 500px;
  color: white;
  overflow-y: scroll
}
.active {
  background: green;
}
ul li {
  display: inline-block;
  list-style-type: none;
  background: lightblue;
  border: 1px solid black;
}
button {
  display: none;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <ul>
    <li>1nfo</li>
    <li>info2</li>
    <li>info3</li>
  </ul>

  <button id="i1">info1</button>
  <button id="i2">info2</button>
  <button id="i3">info3</button>
  <div id="info1">
    Content itself is what the end-user derives value from. Thus, "content" can refer to the information provided through the medium, the way in which the information was presented, as well as the added features included in the medium in which that information
    was delivered. The medium, however, provides little to no value to the end-user without the information and experiences that make up the content. Communication theory philosopher Marshall McLuhan famously coined the phrase, "The medium is the message."[3]
    In the case of content, the channel through which information is delivered, the "medium", affects how the end user perceives content, the "message". The author, producer, or publisher of an original source of information or experiences may or may
    not be directly responsible for the entire value that they attain as content in a specific context. For example, part of an original article (such as a headline from a news story) may be rendered on another web page displaying the results of a user's
    search engine query grouped with headlines from other news publications and related advertisements. The value that the original headline has in this group of query results from the search engine as a medium may be very different from the value that
    it had as message content in its original article. Content also leads to influencing other people in creating their own content, sometimes in a way that the original author didn't or couldn't plan or imagine. This feature adding the option of user
    innovation in a medium means users can develop their own content from existing content.
  </div>
  <div id="info2">
    Traditionally, content was edited and tailored for the public through news editors, authors, and other kinds of content creators. However, not all information content requires creative authoring or editing. Through recent technological developments, truth
    is found in philosopher Marshall McLuhan's idea of a global village; new technologies allow for instantaneous movement of information from every corner to every point at the same time[4] has caused the globe to be contracted into a village by electric
    technology,[5] such as mobile phones and automated sensors. These new technologies can record events anywhere for publishing and converting in order to potentially reach a global audience on channels such as YouTube. Such recorded or transmitted information
    and visuals can be referred to as content. Content is no longer a product of only reputable sources; new technology has made primary sources of content more readily available to all. For example, a video of a politician giving a speech compared to
    an article written by a reporter who witnessed the speech.Media production and delivery technology may potentially enhance the value of content by formatting, filtering, and combining original sources of content for new audiences with new contexts.
    The greatest value for a given source of content for a specific audience is often found through such electronic reworking of content as dynamic and real-time as the trends that fuel its interest. Less emphasis on value from content stored for possible
    use in its original form, and more emphasis on rapid re-purposing, reuse, and redeployment has led many publishers and media producers to view their primary function less as originators and more as transformers of content. Thus, one finds out that
    institutions, that used to focus on publishing printed materials, are now publishing both databases and software to combine content from various sources for a wider-variety of audiences.
  </div>
  <div id="info3">
    The Bhagavad Gita (Sanskrit: भगवद्गीता, bhagavad-gītā in IAST, Sanskrit pronunciation: [ˈbʱaɡəʋəd̪ ɡiːˈt̪aː]; lit. "Song of the Lord"[1]), often referred to as simply the Gita, is a 700-verse Hindu scripture in Sanskrit that is part of the Hindu epic
    Mahabharata (chapters 25 - 42 of the 6th book of Mahabharata). The Gita is set in a narrative framework of a dialogue between Pandava prince Arjuna and his guide and charioteer Lord Krishna. Facing the duty as a warrior to fight the Dharma Yudhha
    or righteous war between Pandavas and Kauravas, Arjuna is counselled by Lord Krishna to "fulfill his Kshatriya (warrior) duty as a warrior and establish Dharma."[2] Inserted[2] in this appeal to kshatriya dharma (chivalry)[3] is "a dialogue ... between
    diverging attitudes concerning methods toward the attainment of liberation (moksha)".[4] The Bhagavad Gita was exposed to the world through Sanjaya, who senses and cognises all the events of the battlefield.[5] Sanjaya is Dhritarashtra's advisor and
    also his charioteer. The Bhagavad Gita presents a synthesis[6][7] of the concept of Dharma,[6][7][8] theistic bhakti,[9][8] the yogic ideals[7] of moksha[7] through jnana, bhakti, karma, and Raja Yoga (spoken of in the 6th chapter)[10] and Samkhya
    philosophy.[web 1][note 1] Numerous commentaries have been written on the Bhagavad Gita with widely differing views on the essentials. Vedanta commentators read varying relations between Self and Brahman in the text: Advaita Vedanta sees the non-dualism
    of Atman (soul) and Brahman as its essence,[11] whereas Bhedabheda and Vishishtadvaita see Atman and Brahman as both different and non-different, and Dvaita sees them as different. The setting of the Gita in a battlefield has been interpreted as an allegory for the ethical and moral struggles of human life. The Bhagavad Gita's call for selfless action inspired many leaders of the Indian independence movement including Bal Gangadhar Tilak and Mohandas Karamchand Gandhi. Mahatma Gandhi referred to the Gita as his "spiritual dictionary".[12]
  </div>
</div>

Answer 2

You can use jquery scrollTop method to scroll to the top of the div.

<div id="info1">description of info1</div>

$("#info1").scrollTop(0);