HTML link to anchor without changing url

Question

I have a button on the top of my page that links to /#tabs (index id="tabs"). it uses a script to scroll nicely down to the id but it changes the url to www.domain.com/#tabs how can I remvoe the #tabs part? I was thinking about doing it in .htaccess but not sure if thats possible and its proerbly a bad idea.

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

Is the button part and it uses this script to scroll smoothly

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

just forget about the top of the script, thats just a part for the index.

How about you simply remove the line that _explicitly sets_ the hash after scrolling is done …? — CBroe, Sep 20 '16 at 14:30

score 3 · Answer 1 · edited Sep 20 '16 at 14:48

3

You can do it otherwise like this:

In 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);
}

this way you can scroll to the required position without changing the url

edited Sep 20 '16 at 14:48

freedomn-m

27,664
8
35
57

answered Sep 20 '16 at 14:26

Vicky Kumar

1,358
1
14
26

That uses angular, which doesn't seem to be present in the question. – Feathercrown Sep 20 '16 at 14:29
sry i made changes in pure javascript – Vicky Kumar Sep 20 '16 at 14:32
Perfect! Just wanted to make sure that the code would work on their end without any extra inclusions. Nice solution, by the way. – Feathercrown Sep 20 '16 at 14:38
1

Add preventdefault / return false to stop the dreaded '#' appearing regardless (or, better yet, use a ` – freedomn-m Sep 20 '16 at 14:48
thanks freedomn-m and feathercrown for your helpful inputs – Vicky Kumar Sep 20 '16 at 14:50

score 0 · Answer 2 · answered May 23 '17 at 17:13

All you need to do is put a tabindex="-1" to the element you want the focus to, and on the event of focusout/blur remove that tab index. This will enable the element not to be tabbed, but will bring the focus to the element.

I have done that using JQuery:

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

score 0 · Answer 3 · answered Feb 28 '20 at 22:38

0

Try use "data-target" instead "href". Works for me.

answered Feb 28 '20 at 22:38

user12982115

9
1

1

Would have been great to provide some basic JS to go with this, as it is this is just a *hint* to go Google something, or rake the OP's code and match it up – James Nov 22 '21 at 14:35

score 0 · Answer 4 · answered Apr 20 '21 at 18:52

Changing Vicky Kumar's answer, this will work.

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);
}

You can style the button to be like the rest of your links in your project. One thing is to set outline to none, so that when someone clicks the button it will not show the border/outline of the button.

HTML link to anchor without changing url

4 Answers4

Linked