How do i make a scrolldown to a specific tab content when using javascript:document.querySelector('#').click() after the specific tab is opened

Question

How do I make below hyperlink scroll over to that tab's content. I've used javascript:document.querySelector('#tb').click() and tab is opened but it doesn't scroll down over.

Here is my source code

 function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; }

 body { font-family: Arial; }.tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; }.tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; }.tab button:hover { background-color: #ddd; }.tab button.active { background-color: #ccc; }.tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; }

 <h2>Tabs</h2> <p>How do i make a scrolldown to a specific tab content when the hyperlink below is clicked?</p> <a href="javascript:document.querySelector('#tb').click()">This link will open the tokyo tab..but how do i implement a scroll over?</a> <br> <br> <br> <img src="D:\Documents\TCOR22000652\travel.jpg" alt="Girl in a jacket" width="600" height="500"> <br> <br> <br> <br> <br> <br> <br> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'London')">London</button> <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> <button class="tablinks" id="tb" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div> <div id="London" class="tabcontent"> <h3>London</h3> <p>London is the capital city of England.</p> </div> <div id="Paris" class="tabcontent"> <h3>Paris</h3> <p>Paris is the capital of France.</p> </div> <div id="Tokyo" class="tabcontent"> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p> <img src="D:\Documents\TCOR22000656\tokyo.jpg" alt="Girl in a jacket" width="500" height="600"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p>

Above (3rd line of HTML ) I have used javascript:document.querySelector('#tb').click() to open the hyperlinked tab, but how do make it scroll over to that tab's content.

Answer 1

in here i place a button on tokyo and outside tokyo. so when the botton clicked, it will scroll to the "target"

 function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } function scrollToTop() { document.querySelector("#content").scrollIntoView(true); /* element.scrollIntoView(true) */; } function scrollToTarget() { /* element.scrollIntoView(true) */; document.querySelector('#tb').click() } /* function scrollToBottom() { element.scrollIntoView(false); } */

 body {font-family: Arial;}.tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; }.tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; }.tab button:hover { background-color: #ddd; }.tab button.active { background-color: #ccc; }.tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } a{ color:blue; cursor: pointer; }

 <h2>Tabs</h2> <p>How do i make a scrolldown to a specific tab content when the hyperlink below is clicked?</p> <a onclick="scrollToTarget();scrollToTop()">This link will open the tokyo tab..but how do i implement a scroll over?</a> <br> <button onclick="scrollToTarget();scrollToTop()">Scroll to target</button> <br> <br> <img src="D:\Documents\TCOR22000652\travel.jpg" alt="Girl in a jacket" width="600" height="500"> <br> <br> <br> <br> <br> <br> <br> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'London')">London</button> <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> <button class="tablinks" id="tb" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div> <div id="London" class="tabcontent"> <h3>London</h3> <p>London is the capital city of England.</p> </div> <div id="Paris" class="tabcontent"> <h3>Paris</h3> <p>Paris is the capital of France.</p> </div> <div id="Tokyo" class="tabcontent"> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p> <img src="D:\Documents\TCOR22000656\tokyo.jpg" alt="Girl in a jacket" width="500" height="600"> <button onclick="scrollToTop()">Scroll to target</button> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p> <p id="content"> point of target </p> </div>