Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

JavaScript popup button on stop interval to scroll to bottom

P

Pnewcode2023

New Coder
Hello, I have the following code below. This works for stopping the interval when the visitor scrolls up the page (the page is reverse scrolled and positioned to the bottom). This is a basic chat project I'm working on.
What I'm attempting to do is have a popup button show up when the user begins to scroll up, much like the chat in Twitch, that says "chat paused for scrolling" if they click it, then they are sent to the bottom of the page and the interval starts again.

Side note: This is all in an include that is on another page. What I have still works, but the bottom is actually at 180px from the bottom of the parent page. I'm not sure if that matters or not.

Any thoughts on how I can do this? Several days of searching only gives me "scroll to top" of the page examples and tutorials, and for some reason even those don't seem to work when viewing the page in the parent page (I thought I could reverse it if it did) so I'm thinking that what I have, has to have this included in it, itself.

This is what I have

JavaScript: 
  startInterval();

$(document).ready(function() {

  $(document).on('scroll', function() {
      stopInterval();

    var scrollTopPosition = $(document).scrollTop();
    console.log('Scroll position:', scrollTopPosition);
    
    // Your other jQuery code here...
  });
});
 
Sort by date Sort by votes
A little bit of HTML would have been helpful, but for this answer I'm going to assume it's a simple page where the <body> is what's scrolling.


You'll want to get the position from the bottom rather than the top, which doesn't exist as a simple scrollBottom() so we have to do something like body height - window height - body.scrollTop().

This is the same thing, but in jQuery:
JavaScript: 
let scrollBottomPosition = $(document).height() - $(window).height() - $(document).scrollTop();
 
Upvote 0 Downvote
@Johna thank you for the reply. The scrolling is working just fine as I had it (reverse scrolling and stays at the bottom of the page). I just can't figure out how to get a button overlay when a user starts scrolling from the bottom to the top, that when clicked it auto scrolls back to the bottom and resumes as normal.
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom