jquery : how to jump to position without scrolling

Question

I wrote the following function, which scrols to some anchor position, when href is clicked:

$("a").click(function() {

href="#myAnchor";
    var fromTop = 95;

    if(href.indexOf("#") == 0) {
      var $target = $(href);
      if($target.length) {
        $('html, body').animate({ scrollTop: $target.offset().top - fromTop });
          return false;
        }
      }
 };
  return false;});

How to change this function, sothat I jump to my anchor without "scrolling". when the href is clicked, it should be jumbed to myanchor position directly.

Why don't you just use 'location.href'? – bouscher Feb 13 '15 at 11:52 — bouscher, Feb 13 '15 at 11:52
Go to my anchor
your html.
Try it – Tasawar Feb 13 '15 at 11:52 — Tasawar, Feb 13 '15 at 11:52

Rory McCrossan · Answer 1 · 2015-02-13T11:59:23.737

This is standard feature of HTML called 'bookmarks', no JS required. First place your bookmark where you would like the browser to scroll to:

<a name="my-bookmark"></a>

Then place your link to it where required:

<a href="#my-bookmark">Go to bookmark</a>

HTML5 also allows you to specify the bookmark by id of the element:

<div id="foo">Foo</div>

<!-- in another part of the page, far far away -->
<a href="#foo">Go to foo</a>

Update

If you need to allow padding at the top of the page then you could use the <a name="x"></a> method and place them at the required distance above the target, although that could become difficult to maintain.

You could use this JS in that scenario:

$("a.bookmark").click(function(e) {
    e.preventDefault();
    var href = $(this).attr(href);
    var fromTop = $('#fixed-header').height();
    $(window).scrollTop($(href).offset().top - fromTop)
});

I need this function cause of this Issue http://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header — Ronald, Feb 13 '15 at 11:55

saawsann · Answer 2 · 2015-02-13T12:05:26.120

4

By default, animate() has speed set to "400ms". You should put it at 0 :

 $('html, body').animate({ scrollTop: $target.offset().top - fromTop }, 0);

EDIT: Or use scrollTop() as @Rory McCrossan explains

edited Feb 13 '15 at 12:05

answered Feb 13 '15 at 11:55

saawsann

625
1
6
17

score 1 · Answer 3 · answered Feb 13 '15 at 12:00

1

instead of animate use .scrollTop() this way:

$(document).scrollTop($target.offset().top - fromTop);

answered Feb 13 '15 at 12:00

Jai

74,255
12
74
103

score -1 · Answer 4 · answered Feb 13 '15 at 11:56

-1

Here's a simple way without using any script:

assign href the id of the div to where you want to jump to

<a href='#jumpto'>Jump</a>

<div id='jumpto'></div>

answered Feb 13 '15 at 11:56

Adnan Ahmed

684
8
15

score -1 · Answer 5 · answered Feb 13 '15 at 12:01

without jQuery, only HTML

<a href="#aaa">go to aaaaa</a> | <a href="#bbb">go to bbb</a>

<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
    
<a name="aaa">aaa</a>
    
    
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
    
  
<a name="bbb">bbb</a>

<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.

EXAMPLE

jquery : how to jump to position without scrolling

5 Answers5