无法滚动以按ID查看(平稳)-HTML / JS

时间:2019-04-10 10:33:46

标签: javascript html

我有这个点击锚标记:

        <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]”

但是它似乎没有包含正确的标签?还是正常?

3 个答案:

答案 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);
      });
});