Home / Questions / 20184
Accepted
Efrain Mejias C
Asked: 2020-08-11 12:44:16 +0800 CST 2020-08-11 12:44:16 +0800 CST

如何在不使用滚动条的情况下在同一页面上导航？

  • 772

创建此功能的主要思想是不使用垂直滚动，而是从按钮或其他控件的单击事件执行所述功能并导航到 同一页面上的标签<div>或 特定标签。<a>

javascript

2 Answers

  1. Best Answer

    要在同一页面内导航，您必须使用具有 id（目标）的元素和<a>指向所述元素的锚点 ( )，如下所示：

    <a href="#id_del_elemento">Ir a tal parte</a>

...

<div id="id_del_elemento"> ... </div>

    目标元素可以是任何元素。

    <a href="#elid">Ir a el ID</a>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p id="elid">este es el elemento</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>

    要在 javascript 中执行相同的操作，您可以执行以下操作： 这里的技巧是您将 url 哈希设置为元素的 id 值，就像在浏览器的 url 栏中手动编辑它一样。

    function moverseA(idDelElemento) {
    location.hash = "#" + idDelElemento;
}

    你用它

    moverseA("id_del_elemento"); // sin el #


    function moverseA(idDelElemento) {
  location.hash = "#" + idDelElemento;
}
    <button onclick="moverseA('elid')">Ir a el ID</button>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p id="elid">este es el elemento</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>

    • 6

  2. rnd 的答案就是你想要的。我将使用 Javascript（使用 jQuery）留下一个替代方案，其中滚动是动画的，因此目标元素不会被跳转，但是在使用移动时会进行一个小的转换animate：

    function saltarA(id, tiempo) {
  var tiempo = tiempo || 1000;
  $("html, body").animate({ scrollTop: $(id).offset().top }, tiempo);
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p><a href="javascript:saltarA('#destino')">Saltar a destino</a></p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>
<p id="destino">Destino!</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>

    • 4