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>

Answer 1

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>

Answer 2

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

Question

2 answers

solution1
2 2018-12-20 22:26:37

solution2
0 2018-12-20 23:45:50

Scroll down to specific div when the user clicks the button

Question

2 answers

solution1 2 2018-12-20 22:26:37

solution2 0 2018-12-20 23:45:50

solution1
2 2018-12-20 22:26:37

solution2
0 2018-12-20 23:45:50