首页 > 解决方案 > 为什么我的 onclick 功能不适用于滚动到目标元素?

问题描述

href?navito=contact成功并可以添加我的contact.php文件,但该onclick功能无法滚动到投资组合 ID。

php代码:

<?php
  $nav = filter_input(INPUT_GET, 'navito');
  if (!isset($nav)) {
     $nav = 'home';
  }
?>

<div>
   <a class="page-scroll" href="?navito=contact" onclick ="down()">Contact</a>
</div>

<section id="portfolio" class="bg-light-gray">
    <?php
        switch ($nav) {
            case 'home':
                include_once 'View/home.php';
                break;
            case 'contact':
                include_once 'View/contact.php';
                break;
            default:
                include_once 'View/home.php';
                break;
        }
    ?>
</section> 

JS代码:

function down(){
    var x= document.getElementById("portfolio");
    x.scrollIntoView();
}

标签: javascriptphphtml

解决方案


onclick函数始终在导航到 中的地址之前href执行。此外,此导航将导致页面完全重新加载。由于该函数down()已在第一步中执行,因此在新重新加载的页面上将不会显示该函数曾经执行过的迹象。

我的建议是设置down()在页面加载后立即执行的功能。

function down() {
    ...
}

window.onload = down;

推荐阅读