9

I have tried many different codes to smooth scroll to anchors. I can't find one that works. It needs to be able to scroll vertically, horizontally, and diagonally. Another problem I find with others is that they don't seem to work with multiple targets. I want it to be able to scroll to any anchor on the page without having to edit the script.

Fiddle

This is the code that matches this the closest, I cant get it to work:

var $root = $('html, body');
$('a').click(function () {

    $root.animate({

        scrollLeft: $($.attr(this, 'href')).offset().left,
        scrollTop: $($.attr(this, 'href')).offset().top

    }, 500);

    return false;
});

It works in JSFiddle but when I put it on my page it doesn't work.

Why is this not a duplicate? This is a multi-direction script that doesn't target single elements. It applies to all the links on the page.

Jerry Stratton
  • 2,699
  • 19
  • 25
b2550
  • 370
  • 2
  • 3
  • 16
  • [http://stackoverflow.com/questions/7717527/jquery-smooth-scrolling-when-clicking-an-anchor-link](http://stackoverflow.com/questions/7717527/jquery-smooth-scrolling-when-clicking-an-anchor-link) –  Aug 13 '13 at 04:15
  • @rps I saw these but none of them worked. – b2550 Aug 13 '13 at 04:16
  • http://kadaj.github.io/tuts/smooth-scroll/smooth-scroll.html –  Aug 13 '13 at 07:38
  • @kadaj That scrolls to individual elements – b2550 Aug 13 '13 at 15:26
  • @rps The code is on fiddle, link is above. – b2550 Aug 13 '13 at 17:06
  • @b2550 your fiddle has no javascript code – Omar Aug 13 '13 at 17:09
  • @rps Sorry, I forgot to update it. Reload it. – b2550 Aug 13 '13 at 17:12
  • If the code works well on fiddle then the problem is in how you're implementing it in your page, are you wrapping the jQuery code in `$(document).ready(function(){...})`? are you including the jquery library? are there any errors on console? – Omar Aug 13 '13 at 17:33
  • @koala_dev I put it at the bottom of the body and it did something, now the links don't work. – b2550 Aug 13 '13 at 17:57
  • @b2550 what is the console saying? (Ctrl+Shift+J on your browser) – Omar Aug 13 '13 at 18:00
  • @koala_dev No errors, just doesn't work – b2550 Aug 13 '13 at 18:08
  • I am going to try a plugin – b2550 Aug 13 '13 at 18:20
  • and you did put the code inside the document ready handler? – Omar Aug 13 '13 at 19:01
  • Yes, it is inside the handler – b2550 Aug 13 '13 at 19:35
  • Could you please elaborate "*multiple targets*"? You can only scroll to one position at a time. Showing multiple elements might not be possible at small screens for example, so how do you mean to target "all links"? – Bergi Aug 13 '13 at 19:56
  • Btw, [the second fiddle you linked](http://fiddle.jshell.net/b2550/B3F25/) is empty and does not contain any JavaScript. – Bergi Aug 13 '13 at 20:00
  • @Bergi || 1. That is what I meant || 2. Yes, it was old. – b2550 Aug 13 '13 at 23:15
  • What do you mean by it's not working, the click event itself is not fired? A. check if you have jquery lib B. check if click event handler is in `$(document).ready` or `$(function(){})` C. if you have added the script codes inside the script tags, see if the tags are inside in head tag –  Aug 14 '13 at 04:44

1 Answers1

2

I can't get your jsfiddle to work, see if this works:

$(function(){
    $('a').on({
      click:function (e) {
        e.preventDefault();
        var root = $("html, body");
        var target = $(this).attr("href");
        root.animate({  
            scrollLeft: $(target).offset().left,
            scrollTop: $(target).offset().top
        }, 500);
      }
    });
)};
peterchon
  • 250
  • 1
  • 6