I have HTML code with a table integrated with PHP Laravel. I'm getting data from Admin.php to my HTML. So the table is coming by a back-end code and is wider than the screen window. I have added a horizontal scroll bar to move it. I have added a link on back-end to move between `<th>` with hash href. The problem is when I click on the link, it is move to the particular `<th>` by scrolling horizontally as well as scrolling vertically. 

Anchor tag in Admin.php:

```
$orderIdColumn .= '<br><a href="#d_' . $delivery->id . '" class="intro">Read notes ></a>';

```

I added a jQuery in my HTML to prevent vertical scrolling:

```
$(document).ready(function()
{
    $('.intro').bind('click',function(event)
    {
        var $anchor = $(this);

        $('html, body').stop().animate({
            scrollLeft: $($anchor.attr('href')).offset().left
        }, 100);

        event.preventDefault();
    });
});

```

Even after including this, the link is still vertically scrolling. However, after adding a static link in HTML and bind it with the above function, it is working. I guess the problem is the link is coming from back end, but not sure. How can I solve this?

This is a demo most likely what I'm trying to do. This code is working perfectly without any vertical scrolling. I don't understand why this is not working in my project.

<http://jsfiddle.net/34r76ag8/21/>