Question

I am having a little trouble with jScrollPane. I created a list of links inside a vertical pane. These links trigger a jquery load into another div. When I scroll down the list of links and click one, it scrolls the pane back to the top and does not trigger the load. If the scroll is already at the top, the load works fine.

--html--
    <div id="projects" class="span-9" style="margin:0 !important">
        {% for project in projects %}
            <a href="project/{{ project.id }}/details">
                <div class="left clear" style="width:335px; margin:0 !important; {% if loop.first %} border-top:1px solid #AAA;{% endif %} border-bottom:1px solid #AAA;">
                    <img src="{{asset(project.thumbnail)}}" class="left" style="width:150px; height:100px; margin:5px 5px 5px 0;">
                    <span style="font-weight:bold">{{ project.title }}</span><br>
                    {{ project.short }}
                </div>
            </a>
        {% endfor %}
    </div>

    <div id="details"></div>

--js--  
    $(function(){   
        $('#projects').jScrollPane();

        $("#projects a").live("click", function(){
            $("#details").load(this.href);
            return false;
        });
    });

--cs--
        #projects{ height: 667px; overflow:auto ;}

Any one know why this may be happening?

Answer 1

I had the same issue as you have. What I did is remove the <a> tag around the divs and put an onclick on the divs to redirect.
This solved the problem for me; hope it does the same for you!