HTML链接到锚点而不改变URL

Question

我在页面顶部有一个按钮，链接到 /#tabs (id="tabs" 的索引)。它使用脚本来平滑地滚动到该 ID，但它会将 URL 更改为 www.domain.com/#tabs。我该如何删除 #tabs 部分？我考虑在 .htaccess 中完成，但不确定是否可行，而且这可能是个坏主意。

以下是 HTML 代码：

    <a class="smoothscroll" href="/#tabs">
      <div class="scroll-down"></div>
    </a>
  </header>

<br />
  <div id="tabs" style="padding:20px;"></div>

  <div class="tabs">
    <h1>About</h1>
    <div class="p">
      about us
      <a href="/contact"><input type="submit" value="Contact Us" class="btn" name="contact" style="min-width:15%;"/></a>
    </div>  
  </div>

---

<a class="smoothscroll" href="/#tabs">
      <div class="scroll-down"></div>
    </a>

按钮部分，并使用该脚本平滑滚动。

<script>
/*----------------------------------------------------*/
/* Quote Loop
------------------------------------------------------ */

function fade($ele) {
    $ele.fadeIn(1000).delay(3000).fadeOut(1000, function() {
        var $next = $(this).next('.quote');
        fade($next.length > 0 ? $next : $(this).parent().children().first());
   });
}
fade($('.quoteLoop > .quote').first());


/*----------------------------------------------------*/
/* Smooth Scrolling
------------------------------------------------------ */

jQuery(document).ready(function($) {

   $('.smoothscroll').on('click',function (e) {
      e.preventDefault();

      var target = this.hash,
      $target = $(target);

      $('html, body').stop().animate({
          'scrollTop': $target.offset().top
      }, 800, 'swing', function () {
          window.location.hash = target;
      });
  });

});


TweenMax.staggerFrom(".heading", 0.8, {opacity: 0, y: 20, delay: 0.2}, 0.4);
</script>

忘记脚本顶部的部分，那只是索引的一部分。

- Volcan 3

---

请参见：https://dev59.com/1nM_5IYBdhLWcg3wZSI6#5298684 - jlynch630

你可以直接删除在滚动完成后_显式设置_哈希的那一行代码，这样怎么样？ - CBroe

Answer 1

你可以用另一种方式来完成这个操作：

在html中，你可以这样做：

<a href="" class="smoothscroll" onclick="functionforscroll('tabs')">
<div class="scroll-down"></div></a>

in js

var functionforscroll = function(id){
    var reqId = "#"+id;
    window.scrollTo(0, $(reqId).offset().top-85);
}

以这种方式，您可以滚动到所需位置而无需更改URL。

- Vicky Kumar

---

这使用了Angular，但问题中似乎没有提到。 - Feathercrown

抱歉，我在纯JavaScript中进行了更改。 - Vicky Kumar

太好了！只是想确保代码能在他们的端上正常运行，不需要任何额外的包含。顺便说一句，这是个不错的解决方案。 - Feathercrown

添加preventdefault / return false以防止出现可怕的'#'（或者更好的方法是使用<button type ='button'而不是<a>） - freedomn-m

感谢 freedomn-m 和 feathercrown 提供的有用信息。 - Vicky Kumar

Answer 2

修改 Vicky Kumar 的答案，这个会起作用。

HTML：

<button class="smoothscroll" onclick="functionforscroll('id')">
<div class="scroll-down"></div></button>

JavaScript

const functionforscroll = function(id){
    const reqId = "#"+id;
    window.scrollTo(0, $(reqId).offset().top-85);
}

您可以将按钮样式设置为与项目中的其他链接相同。其中一件事是将轮廓设置为无，这样当有人单击按钮时，它不会显示按钮的边框/轮廓。

- GreatCoder

Answer 3

你所需要做的就是在你想要聚焦的元素上加上 tabindex="-1"，并在 focusout/blur 事件中移除该 tab index。这将使该元素无法通过 Tab 键聚焦，但仍然可以将焦点带到该元素。

我使用 JQuery 实现了这个功能：

(ELEMENT_FOR_FOCUS).attr('tabindex', -1).on('blur focusout', function () {
                $(this).removeAttr('tabindex');
            }).focus();

- Abhiraj Ambasta

Answer 4

尝试使用"data-target"代替"href"。对我来说有效。

- user12982115

---

很好的提供一些基本的JS代码，因为现在这只是一个提示让你去谷歌一些东西，或者去检查OP的代码并匹配它。 - James