Greetings ,
I would like to cause
[div id=“scrollThis”]
to ScrollIntoView
according to
[td id=“asThisScrolls”]
But so far , no go .
Pls , what am I doing wrong ?
Thanks for your help…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>scrollIntoView.html</title>
<style>
.button {
background-color:#5A697D;
border: none;
color: #E09F1F;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: Tahoma; font-size: 24px;
cursor: pointer;
}
h3 h4 {
color:#5A697D;
}
.divRow {
color:#5A697D;
}
#asThisScrolls {
}
#scrollThis {
}
</style>
</head>
<body style="background-color:#EBE8E4; font-family: Tahoma; font-size:20px; color:#5A697D;;" link="#5A697D;" alink="#5A697D;" vlink="#5A697D;">
<table style="text-align: left; width: 100%; height: 100%; border-color: #E09F1F; border-style: solid; border-width:4px;">
<tbody>
<tr>
<td style="vertical-align: top; text-align: center; width: 25%; border-color: #E09F1F; border-style: solid; border-width: 2px;" > <!-- -->
<br>
<div id="scrollThis" style=" text-align: center; ">
<br><a href="http://automatonnation.us/Automata-Examples.html" target="_blank">
<button class="button">Automatons</button></a>
<br><br><a href="http://vmars.us/freeware/index.html" target="_blank">
<button class="button">Freeware</button></a>
<br><br><a href="http://vmars.us/reads/ListenReadWatch.html" target="_blank">
<button class="button">Listen/Read/Watch</button></a>
<br><br><br><br>
</div>
</td>
<td id="asThisScrolls" style="vertical-align: top; width: 75%;">
<br>
<div style=" text-align: center; color:#5A697D;">
<button class="button">Freeware</button></a>
<br><br>
</div>
<div style=" text-align: center; color:#5A697D;">
<a href="http://kidsafebrowser.us/Read-Documentation-Here.html" target="_blank">
<h3 style="color:#5A697D;">KidSafeBrowser</h3>
</a>
<a href="http://kidsafebrowser.us/Read-Documentation-Here.html" target="_blank">
<h3 style="color:#5A697D;">Read-Documentation-Here.html</h3>
</a>
<h4 style="color:#5A697D;">
<br> KidSafeBrowser is a Free Internet Browser , based on MS Edge (Chromium) Browser .
<br> 'Safe' , because users can only visit sites that are Pre-Approved and stored in an Approved-Links-File .
<br> This makes it ideal for Kids as well as Businesses .
<br> The package can be Downloaded here:
<br> https://sourceforge.net/projects/kidsafebrowser-us/
</h4>
</div>
<div class="divRow" style="text-align:center; color:#5A697D;">
<br>
<a href="https://www.portablefreeware.com/index.php?id=2412#post" target="_blank">
<h3 style="color:#5A697D;">Screenshot Captor</h3>
</a>
<h4 style="color:#5A697D;"> Screenshot Captor is a feature-rich image tool for grabbing, manipulating, annotating, and sharing images.
</h4>
</div>
<div class="divRow" style="text-align:center; color:#5A697D;">
<br>
<a href="https://www.portablefreeware.com/index.php?id=1856#comment31802" target="_blank">
<h3 style="color:#5A697D;" >Instant Eyedropper</h3>
</a>
<h4 style="color:#5A697D;"> Instant Eyedropper is a simple color picker that sits in the system tray.
</h4>
<br>
</div>
<br>
<div class="divRow" style="text-align:center;">
<a href="https://vmars.us/freeware/Line-By-Line/Line-By-Line_HELP.html" target="_blank">
<h3 style="color:#5A697D;">Line-By-Line</h3>
</a>
<h4 style="color:#5A697D;"> 'Line-By-Line' is a text manipulation program <h5>(secondarily , also a basic Text Editor) .</h5></h4>
</p>
</div>
<br>
<div class="divRow" style="text-align:center;">
<h3 style="color:#5A697D;"> PimClip/PimFind </h3>
<h5>Formerly called ClipLog/ClipFind</h5>
<h3 style="color:#5A697D;">is my 'Personal Info Manager' . Easy to use , fast , and powerful . </h3>
<a href="https://vmars.us/freeware/PimClip/PimClip-Help.html" target="_blank">
<h3 style="color:#5A697D;">PimClip</h3>
</a>
<a href="https://vmars.us/freeware/PimClip/PimFind-Help.html" target="_blank">
<h3 style="color:#5A697D;">PimFind</h3>
</a>
</div>
<br>
<div class="divRow" style="text-align:center;">
<h3 style="color:#5A697D;">FreshDraft </h3>
<br>
</div>
<br>
<div class="divRow" style="text-align:center;">
<h3 style="color:#5A697D;">Guitar-Scales-and-Boxes-Builder</h3>
<br>
</div>
<br>
<div class="divRow" style="text-align:center;">
<h3>Html-Grid-Builder </h3>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<br>
<div>
<p style="text-align:center;">
<span style="font-size: 14pt; font-family: "Avenir Next";">
<br><br> <a href="http://vmars.us/"> http://vmars.us/ </a>
</span>
<br>
<br>"All things in moderation , except for love and forgiveness"
<br>
</p>
</div>
<script>
const element = document.getElementById("#scrollThis");
window.addEventListener('scroll' , scrollToBottom);
function scrollToBottom() {
console.log("function scrollToBottom()");
element.scrollIntoView(false);
}
</script>
</body>
</html>
