Javascript 链接到锚点的HTML链接，无需更改url

我在页面顶部有一个按钮，链接到/tabs index id=tabs。它使用一个脚本很好地向下滚动到id，但它将url更改为www.domain.com/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>

是按钮部分，它使用此脚本平滑滚动

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

---

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

你可以这样做：

在html中

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

---

通过这种方式，您可以在不更改url的情况下滚动到所需的位置，只需将tabindex=-1放入您希望焦点所在的元素，并在focusout/blur事件中删除该选项卡索引。这将使元素不被选项卡化，而是将焦点转移到元素上

我已经使用JQuery完成了这项工作：

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

---

尝试改用数据目标href。对我有用。

改变Vicky Kumar的答案，这会有用的

HTML:

---

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

请参阅：在滚动完成后，您只需删除显式设置哈希的行如何…？这使用angular，这在问题中似乎不存在。sry我在纯javascriptPerfect中进行了更改！只是想确保代码能够在没有任何额外包含的情况下正常工作。顺便说一句，这是一个很好的解决方案。添加preventdefault/ReturnFalse以阻止可怕的出现，或者，更好的是，使用感谢freedomn-m和feathercrown为您的有用输入

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

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

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

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