我有这个点击锚标记:
<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方法触发其他功能。因此,它一定是无法正常工作的功能。有人能帮我一下吗?也许我做错了吗?
谢谢! :)
EDIT *****************************
如果我将功能更改为以下形式:
function ScrollToView(id)
{
var elmnt = document.getElementById(id);
alert(elmnt);
elmnt.scrollIntoView(true);
}
警报只是说:“ [object HTMLDivElement]”
但是它似乎没有包含正确的标签?还是正常?
答案 0 :(得分:2)
要滚动至页面顶部,请使用 true 参数:
function ScrollToView() {
var elmnt = document.getElementById("whoweare");
elmnt.scrollIntoView(true);
}
请参阅文档here ...
答案 1 :(得分:1)
如果您想保留代码原始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,也可以决定调整数字的速度。
答案 2 :(得分:0)
如果可以通过按钮使用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);
});
});