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

Question

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

问题陈述：

我想知道我应该在小提琴中进行哪些更改，以便在点击 view options 文本时，它会将我们带到 paris 部分 带有悬停的标签 和 content 自动启用。

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

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

Answer 1

点击查看选项时，它会带您进入选项卡部分。

$(".view_profile_options a").click(function(event) {
    event.preventDefault();
    var sectionTop = $('.tab-contents').offset().top;
    $('html,body').animate({
        scrollTop: sectionTop },
        'slow');
 });

小提琴链接：https://jsfiddle.net/moshiuramit/02znsurj/

Answer 2

首先，您的 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');
});

Answer 3

这里是有效的代码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 专门去巴黎部分。