Smooth-scrolling to URL on click event using function

Question

The royalslider API has a rsSlideClick function which can be triggered on an event.

It looks like this:

    var slider = $('#royalSliderStart').data('royalSlider');
    slider.ev.on('rsSlideClick', function() {

An additional function to use smooth scrolling for anchor links within a list looks like this:

    $('ul.nav > a').bind('click',function(event){ 
              var $anchor = $(this); 
    $('html, body').stop().animate({ 
            scrollTop: $($anchor.attr('href')).offset().top 
            }, 1500); 
                event.preventDefault(); 
            }); 

I'm looking for solutions to use the smooth scroll function with the rsSlideClick function, preferably without referencing anchor links.

As an example of the solution, a user clicks on a given slide and it smooth scrolls down to another area of the page (by id perhaps).

Solutions?

---

Update 1:

HTML

<div class="container"> 
<ul class"nav"> 
<div class="royalSlider" id="royalSliderStart"> 
    <li class=”slide” target=”1”><slide #1></li> 
    <li class=”slide” target=”2”><slide #2></li> 
    <li class=”slide” target=”3”><slide #3></li> 
    <li class=”slide” target=”4”><slide #4></li> 
    <li class=”slide” target=”5”><slide #5></li> 
    <li class=”slide” target=”6”><slide #6></li> 
    <li class=”slide” target=”7”><slide #7></li> 
</div>
</ul> 
</div>

SCRIPT (DOES NOT WORK AS INTENDED. REQUIRES REVIEW.)

var slider = $('#royalSliderStart').data('royalSlider');
    slider.ev.on('rsSlideClick', function() {
            $('.slide').on('click',function(event){ 
                var el = $(this); 
                $('html, body').stop().animate({ 
                    scrollTop: $(el.attr('target')).offset().top 
                }, 1500); 
                event.preventDefault(); 
        }); 
    }); 
});

Answer 1

Updated:

$('.slide').on('click', function(event) { 
    var el = $(this);
    $('html, body').stop().animate({
        scrollTop: $(el.attr('target')).offset().top 
    }, 1500);
    event.preventDefault();
});

HTML

<ul class="nav">
    <li class="slide" target="#slide-1">Slide 1</li> 
    <li class="slide" target="#slide-2">Slide 2</li> 
    <li class="slide" target="#slide-3">Slide 3</li>
</ul> 
<div class="content" id="slide-1">Slide 1 content</div>
<div class="content" id="slide-2">Slide 2 content</div>
<div class="content" id="slide-3">Slide 3 content</div>

Demo jsFiddle

As royalSlider is removing html code and and adding slides, above will not work

*Updated Code for royalSlider

HTML

<div class="royalSlider rsDefault">
    <img src="http://dimsemenov.com/plugins/royal-slider/img/previews/home/visible-nearby.jpg">
    <img src="http://dimsemenov.com/plugins/royal-slider/img/previews/home/animated-blocks.jpg">
    <img src="http://dimsemenov.com/plugins/royal-slider/img/previews/home/fullwidth.jpg">
</div>
<div class="content" id="slide-1">Slide 1 content</div>
<div class="content" id="slide-2">Slide 2 content</div>
<div class="content" id="slide-3">Slide 3 content</div>

JS

$(".royalSlider").royalSlider({});
var slider = $(".royalSlider").data('royalSlider');
slider.ev.on('rsSlideClick', function() {
    $('html, body').stop().animate({
        scrollTop: $('#slide-' + slider.currSlideId).offset().top
    }, 1500);
});

jsFiddle for royalSlider