Internal links
Internal links are a great way to help users navigate long webpages.
Normally, you can create them easily using just HTML:
<a href=”#section1″>Go to Section 1</a>
<h2 id=”section1″>Section 1</h2>
However, in some environments like the Sandbox by Playcode123.com,
internal links may not work as expected because the preview reloads the page.
To solve this, we use a small JavaScript function to scroll smoothly to the target section.
How to Do It with JavaScript (for Sandbox Compatibility)
You can paste the following code into the Playcode123 sandbox or
any HTML editor. It uses onclick events and scrollIntoView() to simulate internal navigation.
Full HTML Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Internal Link Fix</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 20px;
}
a {
color: blue;
text-decoration: underline;
cursor: pointer;
}
.spacer {
height: 1000px;
}
</style>
</head>
<body>
<h1>🔗 Internal Links with JavaScript</h1>
<a onclick=”scrollToSection(‘intro’)”>Go to Introduction</a><br>
<a onclick=”scrollToSection(‘conclusion’)”>Go to Conclusion</a>
<div class=”spacer”></div>
<h2 id=”intro”>Introduction</h2>
<p>This is the introduction section.</p>
<div class=”spacer”></div>
<h2 id=”conclusion”>Conclusion</h2>
<p>This is the conclusion section.</p>
<a onclick=”scrollToSection(‘top’)”>Back to Top</a>
<div id=”top”></div>
<script>
function scrollToSection(id) {
const el = document.getElementById(id);
if (el) {
el.scrollIntoView({ behavior: ‘smooth’ });
}
}
</script>
</body>
</html>
