Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Always move to the top of the page #6

Open
zhaoyi0113 opened this issue Jul 9, 2017 · 5 comments
Open

Always move to the top of the page #6

zhaoyi0113 opened this issue Jul 9, 2017 · 5 comments

Comments

@zhaoyi0113
Copy link

My react component includes three sub-components. They are vertically aligned. I want to move to the second component which the user clicks on the first component, but it always moves to the top of the screen. Any idea about this issue?
@willhoag
Copy link
Owner

Hey @zhaoyi0113, I haven't heard of this issue. Can you provide more details so I can recreate?

@RobMclaughlin
Copy link

I also have this problem, changing the code to the following works, because it sets maxScrollPositionToZero.

var maxScrollPosition = documentHeight;// - clientHeight;

but id rather know what the intention was when deleting the same 2 values. I am using chrome btw

@willhoag
Copy link
Owner

The intention comes from #3 to limit scrolling to the document height to avoid a hard collision with the bottom.

I'm having trouble replicating this on my end to debug.

Can you provide a code sample?

This is as far as I got:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div class="" style="height: 500px;"></div>
        <div id="scrollTo" class="">here</div>
        <div class="" style="height: 400px;"></div>
        <button id="btn" type="button" name="button">scroll</button>
    </body>
    <script type="text/javascript">
        const scrollToElement = require('scroll-to-element')
        const btn = document.querySelector('#btn')
        btn.addEventListener('click', (e) => {
          e.preventDefault()
          scrollToElement('#scrollTo')
        })
    </script>
</html>

@circlexia
Copy link

I also have this problem, changing the code to the following works, because it sets maxScrollPositionToZero.

var maxScrollPosition = documentHeight;// - clientHeight;

but id rather know what the intention was when deleting the same 2 values. I am using chrome btw

are you resolved?

@williamisnotdefined
Copy link

williamisnotdefined commented Nov 3, 2020 •
edited
Loading

Ensure that html tag is with height: 100vh property setted.
@RobMclaughlin @circlexia

I had this problem today and put height 100vh in html tag solved my problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@RobMclaughlin @willhoag @zhaoyi0113 @williamisnotdefined @circlexia