时间戳

首页 > 解决方案 > 如何在单击 javascript/jquery 中的文本时滚动到底部？

javascript - 如何在单击 javascript/jquery 中的文本时滚动到底部？

问题描述

我正在一个网站上工作，我想在点击 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>

所以点击上面的视图选项文本，它应该把我们带到小提琴中的巴黎部分。


问题陈述：

我想知道我应该在小提琴中进行哪些更改，以便在点击查看选项文本时，它会将我们带到巴黎部分选项卡，并自动启用悬停和内容。

我很确定，我必须使用以下 jquery 代码，但我不确定如何集成到当前代码中。

$("button").click(function() {
    $('html,body').animate({
        scrollTop: $(".second").offset().top},
        'slow');
});

标签： javascriptjqueryhtmlscrollhover

解决方案

首先，您的 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样式的附加功能。可以在这里找到更新的 jsFiddle：

/* 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');
});

推荐阅读