Navigate to an element by scrolling from the bottom of the page

Question

Navigate to an element by scrolling from the bottom of the page

I am trying to implement a feature where the page will automatically scroll to a button that is positioned around 300px from the bottom of the page.

https://i.sstatic.net/XN0yL.png

Whenever this particular button is clicked, I want the body of the page to scroll either up or down in order to keep the button always at the bottom of the screen.

I'm struggling with using the common jquery animate function for my specific case:

 $(".hamburger").click( function(event) {     
     $('html, body').animate({
                    scrollTop: $(document).height() - x //need help here
                }, 400);
      });
   });

Any guidance on how to achieve this would be greatly appreciated.

javascript jquery html css jquery-animate

Answer 1

Answer №1

To find the scroll point, calculate the bottom position of the button by adding the top position to the button height and then subtracting the viewport height.

$('button').on('click',function() {
  var bt = $(this).offset().top,
      bh = $(this).outerHeight(),
      bb = bt + bh,
      vh = $(window).height(),
      sp = bb - vh;
  $('html, body').animate({
    scrollTop: sp
  }, 400);
});

*{margin:0;}
section {
  height: 200vh;
}
footer {
  height: 200vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
</section>
<footer>
  <button>asdf</button>
</footer>

Answer 2

To find the scroll point, calculate the bottom position of the button by adding the top position to the button height and then subtracting the viewport height.

$('button').on('click',function() {
  var bt = $(this).offset().top,
      bh = $(this).outerHeight(),
      bb = bt + bh,
      vh = $(window).height(),
      sp = bb - vh;
  $('html, body').animate({
    scrollTop: sp
  }, 400);
});

*{margin:0;}
section {
  height: 200vh;
}
footer {
  height: 200vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
</section>
<footer>
  <button>asdf</button>
</footer>

Answer 3

Answer №2

Give this a try

Here is the code snippet:

<div class="wrapper"></div>

<a href="#" class="top" id="backBtn">Back to Top</a>

</div>

CSS Styles:

.wrapper {
  background-color: lightblue;
  height: 600px;
}

JavaScript function:

$('a#backBtn').click(function() {
    $('html, body').animate({
        scrollTop: 0
    }, 800);
    return false;
});

Answer 4

Give this a try

Here is the code snippet:

<div class="wrapper"></div>

<a href="#" class="top" id="backBtn">Back to Top</a>

</div>

CSS Styles:

.wrapper {
  background-color: lightblue;
  height: 600px;
}

JavaScript function:

$('a#backBtn').click(function() {
    $('html, body').animate({
        scrollTop: 0
    }, 800);
    return false;
});

Navigate to an element by scrolling from the bottom of the page

Answer №1

Answer №2

Similar questions

Are If-instanceof-statements considered harmful in Typescript?

Tips for keeping Sub Menu visible at all times

import template from file using django

PhantomJS Alert: UnresolvedPromiseRejectionNotice

What methods can be used to conceal and protect the source code of CSS and JavaScript files from being downloaded

Showcasing a JSON attribute in the title using AngularJS

PHP redirection cannot be directly translated to JavaScript redirection

What is the optimal method for creating and testing AJAX applications on a local server, then effortlessly deploying them online?

Arrange a pair of div containers side by side on the webpage without the need to alter the existing

The index.html file is unable to load the transpiled JavaScript code generated by B

What is the relationship between JavaScript node modules and vanilla script references within the browser environment?

The accordion feature fails to function properly when incorporated into an ajax response

Having difficulty importing a react module as a node module

Adjustable height for the absolute element

I'm looking to locate the API documentation for AngularJS TypeScript

Feasible: Embedding my complete website using custom HTML code into an iframe

Utilizing the power of jQuery's .each() method to assign a function to numerous slideshow containers

The hyperlink is unresponsive and cannot be activated with a click

Google Analytics Experiments implemented on the server-side

What is the process for choosing corresponding values in jQuery?