Is there way to scroll to anchor rather than jump with javascript (something like smooth scroll)

Question

I have a large document with numbered anchor tags as shown below. And a textbox to punch the numbers in to go to anchor which uses window.location.hash

I am also using arrow keys to go next or previous anchors. I want to scroll to the anchor so to give some sense of direction.

<a name="1">
some text
<a name="2">
some text
<a name="3">

here is my function

function updatePageNumber()
{
    var pagenumber;
    pagenumber = document.getElementById('pageNumber').value;   
    window.location.hash =  pagenumber;
}

Jumping to anchor is very ugly and people loose sense of direction in the text. So is there a way to scroll to anchor with JavaScript. I know there are lots of jQuery examples, but I don't know jQuery and couldn't find JavaScript.

Most important reason is I want to see my page number on the address bar!

Chris Coyier of CSS tricks has got a working example http://css-tricks.com/snippets/jquery/smooth-scrolling/ You will have to change your code accordingly — manraj82, Jun 23 '11 at 08:29

score 16 · Answer 1 · edited Sep 16 '14 at 00:51

16

Add jQuery library.

Use the following script to do a smooth scroll to the target element you want.

jQuery('html,body').animate({scrollTop: jQuery('#target').offset().top}, 1000);

target is the id of the target element and 1000 is the duration of the animation.

edited Sep 16 '14 at 00:51

brasofilo

25,496
15
91
179

answered Jun 23 '11 at 09:42

Troy SK

1,279
7
14

13

Not meaning to revive an old question, there is a bug in your solution; you need to reference the `top` of the `offset` object, not the offset itself. In other words: `jQuery('html,body').animate({scrollTop: jQuery('#target').offset().top}, 1000);` – ean5533 Aug 02 '12 at 20:46
2

I took the liberty to apply @ean5533's bug fix as it is spot on. First, I just copy/pasted the answer's code; didn't work. Dam, started to look for something else. Later, saw the comment. Ups, it works! – brasofilo Sep 16 '14 at 00:54

score 1 · Answer 2 · answered Jul 05 '13 at 14:32

Use this code and enjoy

$(document).ready(function(){
$("#btop").hide();  // replace only #btop with your <div id=" ">

$(function(){
    $(window).scroll(function(){
        if ($(this).scrollTop()>100){
            $('#btop').fadeIn();  // replace only #btop with your <div id=" ">
        }
        else{
            $('#btop').fadeOut(); // replace only #btop with your <div id=" ">
        }
    });

    $('#btop a').click(function(){ // replace only #btop with your <div id=" ">
        $('body,html').animate({
          scrollTop:0
        },200);  // to speed up scroll replace 200 to 300 or 500
        return false;
    });
});
});

score 0 · Answer 3 · answered Jun 23 '11 at 08:25

There is no built-in smooth scrolling in JavaScript so you would have to implement it yourself -- but why re-invent the wheel if you already have it in jQuery and you probably won't have to add more than two or three lines of code? Just download jQuery and the ScrollTo plugin, add them to your <head> section in a <script> tag and then use this to scroll to an element with a given ID:

$.scrollTo("#my-element-id");

This will scroll to the element whose ID is my-element-id so you have to use the id=... attribute in the anchors and not the name=... attribute.

If you wish to add this behaviour automatically to all your anchors within a given div (or to the entire page), you can use the LocalScroll plugin which makes the entire this as simple as:

$.localScroll();

Is there way to scroll to anchor rather than jump with javascript (something like smooth scroll)

3 Answers3

Linked