我在一个网站上工作,在这个网站上,我想在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');
});
发布于 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');
});
发布于 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进行了编辑,以便专门转到巴黎部分。
发布于 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');
});
https://stackoverflow.com/questions/51758684
复制相似问题