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

Question

I am working on a website in which I want to scroll towards the bottom on click of a text in 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>

So on clicking of view options text above, it should take us to the Paris section in the fiddle .

Problem Statement:

I am wondering what changes I should make in the fiddle so that on hitting view options text, it take us to the paris section tab with hover and content getting enabled automatically.

I am pretty sure, I have to use the following jquery code but I am not sure how I can integrate in the current code..

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

Answer 1

Firstly, your jQuery is not binding the click behaviour to the correct a element. Consider the following updates:

$("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');
});

Updated answer

Here is the updated jQuery that includes the additional functionality for opening the Paris city tab, and activation of that tabs active style. An 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 2

Here is the code that works jsfiddle . This is a function to scroll to bottom:

<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>

And all you need to do is call scrollToBottom() function from your link, so your entire <p> tag should look like this

 <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>

EDIT: I edited the jsfiddle to go to Paris section specifically.

Answer 3

On clicking view options it will take you the tab section.

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

Fiddle Link : https://jsfiddle.net/moshiuramit/02znsurj/