我有这个点击锚标签<a>
:
<a href="#" onclick="ScrollToView()">Who we are</a>
我稍后在 HTML 中有这个 div:
<div id="whoweare" align="center" class="box-2">
<div align="center>
<font color="#534f4f" size="+1">
<h1>Who we are</h1>
</font>
</div>
<div style="padding-left: 15px; padding-right: 15px">
<table border="0">
<tr> <!--tablerow-->
<th width=400px>
<div align="center">
<img
src="./img/me.png"
width=60%
</img>
</div>
</th>
<td width=400px>
<div align="justify">
<font color="#534f4f" size="+2" >
<h3>Julius Tolksdorf</h3>
<p>CEO of innomotion media and head of software development.<br>
He will be your primary contact during the planning and development processes.
Julius has already finished about 20 apps & games & web pages and has years of experience being an Android & Unity developer.
</p>
</font>
</div>
</td>
</tr> <!--for padding-->
<tr height=20px/>
</tr>
</table>
</div>
</div>
附上一个带有以下功能的JS文件:
function ScrollToView()
{
var elmnt = document.getElementById("whoweare");
elmnt.scrollIntoView(false);
}
但是在点击时,它应该去id是"whoweare"的地方,但它根本不做任何事情(实际上,它有点"跳"回页面的开头,但当然这不是预期的行为(。
我知道我的 JS 已正确连接,因为我可以从同一脚本使用此 onclick 方法触发其他函数。因此,一定是功能无法正常工作。也许我做错了?
编辑
如果我将我的函数更改为如下所示:
function ScrollToView(id)
{
var elmnt = document.getElementById(id);
alert(elmnt);
elmnt.scrollIntoView(true);
}
警报只是说:"[对象 HTMLDivElement]">
但它似乎没有包含正确的标签。还是这正常?
要滚动页面顶部,请使用 true 参数:
function ScrollToView() {
var elmnt = document.getElementById("whoweare");
elmnt.scrollIntoView(true);
}
请参阅此处的文档...
保留你的代码原版js,你可以尝试:
function ScrollToView()
{
var elmnt = document.getElementById("whoweare");
elmnt.scrollIntoView();
}
如果你也使用jQuery,你可以改用这个版本:
$("#whoweare").click(function() {
$('html, body').animate({
scrollTop: $("#whoweare").offset().top // You can change #whoweare to the id where you want to scroll to
}, 2000);
});
我发现它更有用,因为您可以滚动到页面的任何 id,您还可以决定调整数字的速度。
您可以将JQuery与按钮一起使用,滚动似乎可以工作。查看此代码https://codepen.io/anon/pen/BEWQgm
<button>Click to Bottom</button>
<div align="center" class="box-2">
<div align="center>
<font color=" #534f4f " size=" +1 ">
<h1>Who we are</h1>
</font>
</div>
<div style=" padding-left: 15px; padding-right: 15px ">
<table border=" 0 ">
<tr> <!--tablerow-->
<th width=400px>
<div align=" center ">
<img
src=" ./img/me.png "
width=60%
</img>
</div>
</th>
<td width=400px>
<div align=" justify ">
<font color=" #534f4f " size=" +2 " >
<h3>Julius Tolksdorf</h3>
<p>CEO of innomotion media and head of software development.<br>
He will be your primary contact during the planning and development processes.
Julius has already finished about 20 apps & games & web pages and has years of experience being an Android & Unity developer.
</p>
</font>
</div>
</td>
</tr> <!--for padding-->
<tr height=20px/>
</tr>
</table>
</div>
<div align="center" class="box-2">
<div align="center>
<font color=" #534f4f " size=" +1 ">
<h1>Who we are</h1>
</font>
</div>
<div style=" padding-left: 15px; padding-right: 15px ">
<table border=" 0 ">
<tr> <!--tablerow-->
<th width=400px>
<div align=" center ">
<img
src=" ./img/me.png "
width=60%
</img>
</div>
</th>
<td width=400px>
<div align=" justify ">
<font color=" #534f4f " size=" +2 " >
<h3>Julius Tolksdorf</h3>
<p>CEO of innomotion media and head of software development.<br>
He will be your primary contact during the planning and development processes.
Julius has already finished about 20 apps & games & web pages and has years of experience being an Android & Unity developer.
</p>
</font>
</div>
</td>
</tr> <!--for padding-->
<tr height=20px/>
</tr>
</table>
</div>
<div align="center" class="box-2">
<div align="center>
<font color=" #534f4f " size=" +1 ">
<h1>Who we are</h1>
</font>
</div>
<div style=" padding-left: 15px; padding-right: 15px ">
<table border=" 0 ">
<tr> <!--tablerow-->
<th width=400px>
<div align=" center ">
<img
src=" ./img/me.png "
width=60%
</img>
</div>
</th>
<td width=400px>
<div align=" justify ">
<font color=" #534f4f " size=" +2 " >
<h3>Julius Tolksdorf</h3>
<p>CEO of innomotion media and head of software development.<br>
He will be your primary contact during the planning and development processes.
Julius has already finished about 20 apps & games & web pages and has years of experience being an Android & Unity developer.
</p>
</font>
</div>
</td>
</tr> <!--for padding-->
<tr height=20px/>
</tr>
</table>
</div>
<div align="center" class="box-2">
<div align="center>
<font color=" #534f4f " size=" +1 ">
<h1>Who we are</h1>
</font>
</div>
<div style=" padding-left: 15px; padding-right: 15px ">
<table border=" 0 ">
<tr> <!--tablerow-->
<th width=400px>
<div align=" center ">
<img
src=" ./img/me.png "
width=60%
</img>
</div>
</th>
<td width=400px>
<div align=" justify ">
<font color=" #534f4f " size=" +2 " >
<h3>Julius Tolksdorf</h3>
<p>CEO of innomotion media and head of software development.<br>
He will be your primary contact during the planning and development processes.
Julius has already finished about 20 apps & games & web pages and has years of experience being an Android & Unity developer.
</p>
</font>
</div>
</td>
</tr> <!--for padding-->
<tr height=20px/>
</tr>
</table>
</div>
<div id="whoweare" align=" center " class=" box-2 ">
<div align=" center>
<font color="#534f4f" size="+1">
<h1>Who we are</h1>
</font>
</div>
<div style="padding-left: 15px; padding-right: 15px">
<table border="0">
<tr>
<!--tablerow-->
<th width=400px>
<div align="center">
<img src="./img/me.png" width=60% </img> </div> </th> <td width=400px>
<div align="justify">
<font color="#534f4f" size="+2">
<h3>Julius Tolksdorf</h3>
<p>CEO of innomotion media and head of software development.<br> He will be your primary
contact during the planning and development processes. Julius has already finished
about 20 apps & games & web pages and has years of experience being
an Android & Unity developer.
</p>
</font>
</div>
</td>
</tr>
<!--for padding-->
<tr height=20px />
</tr>
</table>
</div>
<div id="" align="center" class="box-2">
<div align="center>
<font color=" #534f4f " size=" +1 ">
<h1>Who we are</h1>
</font>
</div>
<div style=" padding-left: 15px; padding-right: 15px ">
<table border=" 0 ">
<tr> <!--tablerow-->
<th width=400px>
<div align=" center ">
<img
src=" ./img/me.png "
width=60%
</img>
</div>
</th>
<td width=400px>
<div align=" justify ">
<font color=" #534f4f " size=" +2 " >
<h3>Julius Tolksdorf</h3>
<p>CEO of innomotion media and head of software development.<br>
He will be your primary contact during the planning and development processes.
Julius has already finished about 20 apps & games & web pages and has years of experience being an Android & Unity developer.
</p>
</font>
</div>
</td>
</tr> <!--for padding-->
<tr height=20px/>
</tr>
</table>
</div>
<button>Click to Top</button>
这是JavaScript,如果你在顶部包含jquery库
$(document).ready(function(){
$("button").click(function() {
$('html, body').animate({
scrollTop: $("#whoweare").offset().top - document.body.clientHeight + $(document).height()
}, 1000);
});
});