我在Anonymous's回答---＆gt;的帮助下创建了一个jQuery对话框，其中包含不同的内容标签。 Browsing different content in jQuery Dialog
他为我想要实现的目标提供了一个很好的解决方案。
foreach$(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;
}
在id = info1 / info2 / info3的描述中，当我包含大量数据时，对话框必须滚动。因此，当我滚动到信息1的底部时，我点击了info2选项卡进行浏览，如果然后我点击回到info1选项卡，则info1中的描述仍将保留在底部，而不是返回到顶部
那么当我点击不同的标签时，如何让我的卷轴始终回到顶部？我需要设置一个锚点吗？
答案 0 :(得分：2)
您可以使用jquery scrollTop 方法滚动到div的顶部。
<div id="info1">description of info1</div>
$("#info1").scrollTop(0);
答案 1 :(得分：1)
您可以使用jquery scrollTop。来自scrollTop文档：
说明：为每组匹配元素设置滚动条的当前垂直位置。
<强>
scrollTop( value )值类型：数字
一个数字，表示将滚动条设置为的新位置。
垂直滚动位置与像素数相同 隐藏在可滚动区域上方的视图中。设置scrollTop 定位每个匹配元素的垂直滚动。
我将overflow-y css属性添加到info div，以防div的内容超过它的高度。
$(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>