1

I am working on a web application that adds charts dynamically on the page, there is a sidebar on the left which provides anchor points to navigate through the charts.

The sidebar anchor points and charts are appended via JQuery. I believe part of the issue here is that the event listeners are not firing on the appended elements.

The web app code is pretty big, so I am just attaching the snippets involved. My goal here is to make clicking on the anchors "SMOOTH" scroll, instead of jump from one chart to the other.

I looked at this post below to get the scrolling code: 

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    return false;
});

Smooth scrolling when clicking an anchor link

Then combined that with this post, to add the event listener to the appended div:

Event binding on dynamically created elements?

$(document).on( eventName, selector, function(){} );

I eventually came down with this function, but it's still not working:

$(document).on('click', '#scrollAnchor', function () {
    "use strict";
    alert("Click event works but I still won't scroll!");
    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
    return false;
});

And finally, here is the code for the appended element.

function updateChartData() {

           ...

    navDiv = '<a id="scrollAnchor" href="#' + chartName
             + '"> <div class="chartAnchor"><span>'
             + chartName
             + '</span></div></a>';
}

function addChartPage() {

           ...

    $('#allNavs').append(navDiv);
}

(where allNavs is the container for the anchors)

Community
  • 1
  • 1
NutellaAddict
  • 574
  • 6
  • 24
  • JUST TO CLARIFY: The Anchor WORKS! It just will not scroll. – NutellaAddict Sep 17 '15 at 08:10
  • I implement often those "fluid" anchor scrolls. "jQuery.LocalScroll" is for me the easiest way to implement it in my web insteed of working on my own code. http://flesler.blogspot.com.es/2007/10/jquerylocalscroll-10.html. Once you have the library with as easy piece of script like: $('.fluidScroll').localScroll({ duration: 1000 }); then you just have to add the class "fluidScroll" to your links container. – Alvaro Menéndez Sep 17 '15 at 09:04

2 Answers2

0

I think there are a few problems here. Firstly, you shouldn't use the same id multiple times. It looks as though you are appending multiple elements with a scrollAnchor id.

So, that being the case, I would alter your updateChartData() function to use a class instead of an id like so...

function updateChartData() {

    ...

    navDiv = '<a class="scrollAnchor" href="#' + chartName
             + '"> <div class="chartAnchor"><span>'
             + chartName
             + '</span></div></a>';
}

Secondly, I think you are experiencing some confusion when using the this keyword in your click event. At the point at which you reference this, you are referring to your $('html, body') selector. Here's how to get around that. Note that I am now using the class selector rather than the id.

$(document).on('click', '.scrollAnchor', function () {
    var scrollHere = $(this).offset().top;
    $('html, body').animate({
        scrollTop: scrollHere
    }, 500);
    return false;
});
Jamie Dunstan
  • 3,725
  • 2
  • 24
  • 38
0

i've created this example in JsFiddle:

https://jsfiddle.net/rcheruti/q11t3ywq/1/

All your charts need diferents IDs.
On your "menu", the "a" tags need an attribute to store these IDs of charts (you are using "href" at the moment, and that is fine).
You dont need to use an "a" tag to do this, is all in the Javascript code what is needed to make the scroll works.

Below is the example code:

HTML:

<div class="menu">
  <button id="addItem">Add item</button>
</div>
<div class="box">

</div>

Js:

$(function(){
    var menu = $('.menu');
    var box = $('.box');
    var body = $('body');
    var placeholder = /@/g;
    var nextId = 1;
    var elString = '<div class="item" id="element_@">Element @</div>';
    var buttonString = '<a href="#element_@">Go to @</a>';
    menu.on('click','#addItem',function(ev){
      menu.append( buttonString.replace(placeholder, nextId) );
      box.append( elString.replace(placeholder, nextId) );
      nextId++;
    });
    menu.on('click','a',function(ev){
      ev.preventDefault();
      var button = $(this);
      var id = button.attr('href');
      var el = $(id);
      //body[0].scrollTop = el[0].offsetTop;
      body.animate({
        scrollTop: el[0].offsetTop
      }, 1000);
    });
  });

It is just an example, but it does the job.

RCC
  • 96
  • 7