Question 274261 in Html Question posted in
Some basic documentation can be found here.

Html – Why isn't my home button putting the user on top of the site

I’ve been doing a Portfolio for myself, using React JS and I’ve been dealing with this issue it’s bothering me because I have a piece of text that I use as a logo when that piece of text is clicked, it sends the user back to the top of the page.

But the issue is that the button works but doesn’t send the user back to the top and leaves a bit of that space. I can’t explain it well and I’m sorry in case you don’t understand my issue but I’ll upload a picture of what happens when I click the text.

after clicking the text

I wasn’t able to take a full screenshot but as u guys can see from the sidebar there’s still a bit that u can go up and I wanted to know what I could do to solve this issue.

I’ll put here too a link to the repository of the project so you guys can see the code overall and maybe give me a solution for my issue.. (I’m also having an issue with responsiveness that when the size of the browser is in half I have a sidebar but horizontal too).

I’m sorry btw if you guys can’t understand the overall problem, I’m kinda new to React JS and Web Dev and I’m struggling a bit to get everything in my head and understand this..

Github Repository

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After seeing both of the answers I got I managed to change my js to make it work.

    I'll leave what I've done to solve the issue and I'm gonna end this post, thanks again for the help on answering the question

    const scrollDown = (elementID) => {
const idElement = document.getElementById(elementID);
if (elementID == 'home') {
  window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
} else {
  idElement.scrollIntoView({ behavior: 'smooth'});
}

// Create a custom event and dispatch it with the elementID
const scrollEvent = new CustomEvent('scrollToElement', {
  detail: { elementID },
});
window.dispatchEvent(scrollEvent);

    }


  2. 0

    You have put the Navbar component which is ahead of HomeSection and the scroll sets to only HomeSection … If you include the NavBar inside the HomeSection that should work as expected..

    I mean keep as below

      <div id="home">
    <Navbar />
    <HomeSection />
  </div>

    Remove from App.js as

    <Router>
  ///// from here ////
  <Routes>
  <Route path='/' exact Component={Home}/> ...

    Also you could do with the css hack as per the comment …

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search