Scroll down to specific div when the user clicks the button

Question

I want the screen to scroll down to the div. This div has an ID of 'weather-data'

I have tried the following;

document.getElementById('weather-data').scrollIntoView();

I have also tried using anchor tags this did not seem to work

The button which the user will click:

<button id="submit" onclick="myFunction()">
                    Submit
                </button>

The function that runs when the button is clicked:

function myFunction(){
    cityName();

    getData();

    clear();

    document.getElementById('weather-data').scrollIntoView();
}

This is the div I want the screen to scroll to:

<div id="weather-data">

</div>

Use addEventListener instead, here is a working example. https://jsfiddle.net/eavgp0bh/1/ — Daniel Doblado, Dec 20 '18 at 22:19
@DanielDoblado While I agree that `.addEventListener()` is the modern and better approach, it has nothing to do with this code working or not. — Scott Marcus, Dec 20 '18 at 22:21
@ScottMarcus I agree too, I was trying to find a solution just using onclick, most likely this won"t work because quoting this issue `onclick operates in the target-page scope and cannot see any functions your script creates` More information here. https://stackoverflow.com/a/17378538/2498992 I just wanted to provide a working solution in the case using my approach is not a problem for the user. — Daniel Doblado, Dec 20 '18 at 22:31
@DanielDoblado That post has nothing to do with this issue. That post specifically deals with the use of inline event attributes in conjunction with element creation using `innerHTML` and `outerHTML`. The whole thing about `onclick` not being able to see any functions your script creates is not a true statement in and of itself. The OPs code works as is, it is the calling of the other functions that is stopping it. — Scott Marcus, Dec 20 '18 at 22:36

score 2 · Answer 1 · answered Dec 20 '18 at 22:26

2

use the anchor tag to link the the div

body{
  margin: 0;
}

div{
  height: 100vh;
  border: 1px solid black;
}

<html>
  <body>
    <div id='a'>a</div>
    <div id='b'>b</div>
    <div id='c'>c</div>
    <div id='d'>d</div>
    <div id='e'>e</div>
    <button><a href='#c'>go to c</a></button>
  </body>
</html>

answered Dec 20 '18 at 22:26

Stedman Dennis

71
5

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_a_href_anchor – Steven Stark Dec 21 '18 at 00:29

score 0 · Answer 2 · answered Dec 20 '18 at 23:45

I fixed the issue I had to write an if statement to check if there was any text in the h1 element.

if(weatherMain != null){

                document.getElementById('icon').scrollIntoView();
                document.getElementById('weather-main').scrollIntoView();

            }

Scroll down to specific div when the user clicks the button

2 Answers2