如何在单击javascript/jquery中的文本时滚动到底部？
如何在单击javascript/jquery中的文本时滚动到底部？
提问于 2018-08-09 12:07:46
我在一个网站上工作，在这个网站上，我想在javascript/jquery中点击一个文本，然后滚动到底部。
<p class="ml-2 mb-2 d-flex view_profile_options"><a href=""> view options</a> <i class="ml-2 fas fa-2x fa-angle-right"></i></p>因此，在单击上面的视图选项文本时，应该会将我们带到fiddle中的Paris部分。
问题陈述：
我想知道我应该在小提琴中做什么更改，以便在点击视图选项和文本时，它会将我们带到paris部分的选项卡，并自动悬停和content getting enabled。
我非常确定，我必须使用以下jquery代码，但我不确定如何将其集成到当前代码中。
$("button").click(function() {
$('html,body').animate({
scrollTop: $(".second").offset().top},
'slow');
});回答 3
Stack Overflow用户
发布于 2018-08-09 12:17:55
首先，您的jQuery没有将单击行为绑定到正确的a元素。考虑以下更新：
$("p.view_profile_options a") // Causes the logic to attach to the link in
.click(function(event) { // your paragraph
event.preventDefault(); // Causes the default browser behaviour for
// link clicking to not happen
$('html,body').animate({
scrollTop: $(".tab").offset().top}, // Causes the scrolling to the
// .tabs (ie as in your jsFiddle)
'slow');
});更新的答案
以下是更新后的jQuery，其中包括用于打开巴黎城市选项卡和激活该选项卡active样式的附加功能。一个updated jsFiddle of this can be found here
/* Causes the logic to attach to the
link in your paragraph */
$("p.view_profile_options a")
.click(function(event) {
/* Causes the default browser behaviour
for link clicking to not happen */
event.preventDefault();
/* Open the 'paris' tab automatically */
openCity(event, 'Paris')
/* Cause the 'paris' tab to be
highlighted as active */
$('.tab .tablinks:nth(1)').addClass('active')
/* Causes the scrolling to the .tabs
(ie as in your jsFiddle) */
$('html,body').animate({
scrollTop: $(".tab").offset().top},
'slow');
});Stack Overflow用户
发布于 2018-08-09 13:00:40
下面是运行jsfiddle的代码。这是一个滚动到底部的函数：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function scrollToBottom() {
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
}
</script>您所需要做的就是从链接调用scrollToBottom()函数，因此整个<p>标记应该如下所示
<p class="ml-2 mb-2 d-flex view_profile_options"><a href="javascript:scrollToBottom()"> view option</a> <i class="ml-2 fas fa-2x fa-angle-right"></i></p>编辑:我对jsfiddle进行了编辑，以便专门转到巴黎部分。
Stack Overflow用户
发布于 2018-08-09 13:24:44
单击视图选项时，将带您进入选项卡部分。
$(".view_profile_options a").click(function(event) {
event.preventDefault();
var sectionTop = $('.tab-contents').offset().top;
$('html,body').animate({
scrollTop: sectionTop },
'slow');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51758684
复制相关文章
相似问题