Question

成功完成对?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();
}

Answer 1

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

我的建议是将down()函数设置为在页面加载后立即执行。

function down() {
    ...
}

window.onload = down;

Answer 2

与将button属性添加到锚标记相比，您最好只使用onclick，这样会变得混乱：

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

div {
  height: 1000px;
}

button {
  color: blue;
  text-decoration: underline;
  background-color: transparent;
  border: none;
}

<div>
  <button class="page-scroll" onclick="down()">Contact</button>
</div>

<span id="portfolio" class="bg-light-gray">
  <a href="#">Here we are</a>
</span>

为什么我的onclick函数无法滚动到目标元素？

2 个答案: