I am writing a webpage and use included PHP files to make the source code simpler.
Here is the code:
Filename: question.php
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<?php include 'questionmenu.php';?>
<?php include 'questionbanner.php';?>
<?php include 'questionmaincontainer.php';?>
</body>
</html>
There is a button in the questionmenu.php file. The code is the following:
<pre lang="PHP">
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.questionmenu {
width: 100%;
height: 80px;
border: 10px solid blue;
}
.button {
height: 100%;
border: 10px solid red;
color: black;
}
.button:hover {
color: white;
background-color: red;
}
</style>
<div class="questionmenu">
<button onclick="myFunction(); scrollWin()" class="button">PUSH TO SCROLL</button>
</div>
<script>
function myFunction() {
var elmnt = document.getElementById("scrolluntil");
elmnt.scrollIntoView();
}
</script>
<script>
function scrollWin() {
window.scrollBy(0, 800);
}
</script>
There is a questionbanner.php file to make the height of the page. There is no other function. The code is simple like this:
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.questionbanner {
width: 100%;
height: 1000px;
border: 10px solid green;
}
</style>
<div class="questionbanner"></div>
At last, there is the questionmaincontainer.php file. It has three columns and I want to scroll down to the column-center div p that's ID is "scrolluntil" when I push the button.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
.column-left{
float: left;
width: 25%;
height: 400px;
border: 10px solid grey;
}
.column-center{
float: left;
width: 50%;
height: 400px;
border: 10px solid lightblue;
}
.column-right{
float: left;
width: 25%;
height: 400px;
border: 10px solid yellow;
}
</style>
<div class="container">
<div class="column-left"></div>
<div class="column-center">
<p id="scrolluntil">SCROLL DOWN UNTIL THIS!</p>
</div>
<div class="column-right"></div>
</div>
What I have tried:
The scripts are in the questionmenu.php file. The scripts are the following:
function myFunction() {
var elmnt = document.getElementById("scrolluntil");
elmnt.scrollIntoView();
}
and
function scrollWin() {
window.scrollBy(0, 800);
}
None of the scripts work.
The problem may be that the questionmenu.php height is about 80px and the scroll should be in the question.php file. I do not know how to solve this problem to work these scripts from an included file to make effect outside of it. Does anybody meet a similar problem?
Submit an article or tip