jcarousel.responsive.js question

jcarousel.responsive.js question

so the prev and next are driven by
<a href="#" class="jcarousel-control-prev">&lsaquo;</a>
<a href="#" class="jcarousel-control-next">&rsaquo;</a>

which call jcarousel.responsive.css and jcarousel.responsive.js in this latter is the the jquery function that includes

        $('.jcarousel-control-prev')
            .jcarouselControl({
                target: '-=1'
            });

        $('.jcarousel-control-next')
            .jcarouselControl({
                target: '+=1'
            });

My problem appears to be that target off <a href="#" class="jcarousel-control-next">&rsaquo;</a> isnt happening, it just jumps to the top of the page instead of scrolling the carousel. 

This is the reslutant html

<div class="jcarousel-wrapper">
                                            <div class="jcarousel">
                                            <ul>
                                            
                                                <li>
                                                    <a href="/special-offers/"><img alt="Special Deals" class="carousel-image" src="/media/images/sd.png"></a>
                                                    <div class="carousel-caption">
                                                        <h3>Special Deals</h3>
                                                        <p>Text</p>
                                                    </div>
                                                </li>
                                           
                                                <li>
                                                    <a href="/hen-and-stag-parties/"><img alt="Hen &amp; Stag Parties" class="carousel-image" src="/media/images/hp.png"></a>
                                                    <div class="carousel-caption">
                                                        <h3>Hen &amp; Stag Parties</h3>
                                                        <p>Text</p>
                                                    </div>
                                                </li>
                                           
                                                <li>
                                                    <a href="/links/"><img alt="Places to Visit" class="carousel-image" src="/media/images/p2v.png"></a>
                                                    <div class="carousel-caption">
                                                        <h3>Places to Visit</h3>
                                                        <p>Text</p>
                                                    </div>
                                                </li>
                                           
                                           </ul>
                                           <a href="#" class="jcarousel-control-prev"></a>
                                           <a href="#" class="jcarousel-control-next"></a>
                                           <p class="jcarousel-pagination"></p>
                                           </div>
                                       </div>
                                    
                                </div>
Can anyone shed any light on why I do not get the behaviour I expect please?