2

i have header, footer and home page contents in diffrent pages, but header and footer are in same folder called layout. Now i have hyperlink on header(about Us) which need to scroll down to footer which has contact detailsin it.

How can i achive this? Please guide me.

UPDATE src folder has home folder and layout folder, layout folder has header.html and footer.html I have contents in all three pages(home, header and footer) everyting is displayed when home url is loaded in local header has the block saying "contact us", on click should scroll to footer which has contact details. This i need to achive using #Id did not work

Hithesh Veer
  • 27
  • 1
  • 9

3 Answers3

1

On your link:

<a href='#footer'>About Us</a>

On your footer:

<div id="footer">
    ...Content...
</div>
Pedro Lima
  • 1,576
  • 12
  • 21
  • im not using single page application @pedro Lima – Hithesh Veer Dec 26 '18 at 16:20
  • All that matters are that your elements are rendered in the same page. It doesn't matter if they come from the same file or not. This is a front-end method, so the only important thing is the DOM. I understood that the header and the footer will be in the page simultaneously, right? So it should work fine. – Pedro Lima Dec 26 '18 at 16:36
  • its not working :( @Pedro Lima – Hithesh Veer Dec 26 '18 at 17:01
1

You can do this with Window.scroll

function scrollDown(){
  window.scroll({
            top: document.body.scrollHeight,
            behavior: 'smooth'
        });
}
.wrapper {
  height: 600px;
  min-height: 400px; /* Will be AT LEAST 20em tall : overrides height */
}
<div>Header</div>
<div>
<button type="button" id="submit" class="btn btn-primary" onclick="scrollDown()">scrollDown</button>
</div>
<div class="wrapper"> body</div>
<div>footer</div>
Ahmed Ghoniem
  • 661
  • 1
  • 8
  • 15
0

The files you describe sound like that of the project source files... Which I will assume are later rendered as a web page.

If this assumption is correct, you will most likely want to give the content you want to scroll to an id, as shown here: <element id="your-id-here">

In doing so, you then are able to target that element via a link, using the following syntax.

If your site, is example.com/home and the element you wish to target is identifier as your-id-here from above, you would generate a link, example.com/home#your-id-here ... this will navigate to the targeted element on the page.

<a href="page-path#element-id">Link</a>

Read more here

tpayne84
  • 181
  • 1
  • 9
  • is "page-path" you mentioned at last line is .html file path?? @tpayne84 – Hithesh Veer Dec 26 '18 at 16:36
  • i gave the path in anchor tag as this "./src/layout/footer.html#footerSection" but its not scrolling insted its navigating to footer page not scrolling – Hithesh Veer Dec 26 '18 at 17:05
  • No, it will be the URI displayed in the browser address bar. Local: `./path/to/site/about.html` URI: `example.com/about` URI-WithIDTag: `example.com/about#footer` – tpayne84 Dec 26 '18 at 17:38
  • For local also getting same result i,e it navigates to mentioned page. I have updated the file structure in question for better undesanding of my question. – Hithesh Veer Dec 26 '18 at 18:47