-1

I am having issues with getting my script to work. I am using this bit of code from Codyhouse to add a navigation to my page. The basics of it are, clicking the hamburger opens it, then when you click on a link, it should scroll the page to that location, while closing the menu.

This all works fine, but because the animation is using transform: translateY(170px);, the link is finding it's position, but when it gets to it, the page has been moved 170px, resulting in being 170px below where it needs to be on screen.

My idea for the fix was to delay the clicking on the link until the animation was finished, which lasts .5 seconds, and then go to the point on the page.

This is my script,

$('.nav-click').click(function (e) {
    e.preventDefault();                   
    var goTo = this.getAttribute("href"); 
    setTimeout(function(){
        window.location = goTo;
    },2000);       
});

The result of my script is that, when you click on the link, it still scrolls to the position on the page, and then, after the 2 seconds I have set currently, it jumps to the proper place on the page.

It should be waiting 2 seconds, and then following it's href.

RevanthKrishnaKumar V.
  • 1,855
  • 1
  • 21
  • 34
Tim Holley
  • 1
  • 1
    Try `var goTo = this.href;` to get absolute URL – A. Wolff Jul 24 '15 at 18:04
  • Thanks for the reply. The issue isn't that it doesn't have the right url, but that the delay is not happening. I did however try this anyways, and it made no difference. – Tim Holley Jul 24 '15 at 18:12
  • What if you didn't set the goTo var until the timout occurs aswell? I don't know if it will help but it might. – GrumpyCrouton Jul 24 '15 at 18:38
  • Have you came across this answer yet - http://stackoverflow.com/questions/17534661/make-anchor-link-go-some-pixels-above-where-its-linked-to? As well greetings from Ldn ON small world! – Spade Jul 24 '15 at 18:42
  • Thanks for the link to that Kepoly. Wasn't able to get those suggestions to work. Decided to just remove the transform from the whole page, as the practicality of the links working is much more important then a little effect. – Tim Holley Jul 25 '15 at 15:54

2 Answers2

0

Try doing something like this:

$('.nav-click').click(function(e) {
    e.preventDefault();
    var goTo = this.getAttribute('href');

    var interval = setInterval(function() {
        if (!$('main').hasClass('nav-is-visible')) {
            clearInterval(interval);
            window.location = goTo;
        }
    }, 100);
});
dhouty
  • 1,969
  • 12
  • 21
  • This made no difference to the outcome from what my script was doing. Thanks for the response though. I've decided just to remove the transform all together, as I would rather the links work then have a little effect work. – Tim Holley Jul 25 '15 at 15:55
0

I found no solution to this problem, but opted to remove the transform from the page all together as the links going to the right place is more important to me then having that effect.

Tim Holley
  • 1