[ad_1]
Hello ,
want to wake up
[div id=“scrollThis”]
To ScrollIntoView
according to
[td id=“asThisScrolls”]
But so far it doesn’t work.
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>
getElementById does not take #.
You can’t scroll the table cells and I don’t think that’s what you wanted.
If you want to keep the “Automata/Freeware/Links” visible while the right panel scrolls up and down, you can do it like this, so you don’t need JS.
#scrollThis{
position:-webkit-sticky;
position:sticky;
top:0;
}
Note that you shouldn’t use tables for modern layouts or inline styles (even for demos). 
As an example, I quickly converted that page to not use tables. I know this isn’t your first question, but I’d be sorry if I didn’t mention it.
There are too many headers without content, so you have to think about the structure. The link should probably be a list. target="_blank" It is a user choice and should be avoided. Also note that html doesn’t allow buttons inside anchors (or vice versa). This is because you cannot have two interactive content sets. Should the browser choose link or form submission?
I don’t expect you to copy and use it, but it’s something to work on in the future.
Thanks Paul, great help.
1 like
[ad_2]
Source link
