使用函数在点击事件上平滑滚动到 URL

Question

royalslider API 有一个可以在事件上触发的 rsSlideClick 函数。

看起来像这样：

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

对列表中的锚链接使用平滑滚动的附加功能如下所示：

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

我正在寻找将平滑滚动功能与 rsSlideClick 功能结合使用的解决方案，最好不要引用锚链接。

作为解决方案的一个示例，用户单击给定的幻灯片，它会平滑地向下滚动到页面的另一个区域（也许通过 id）。

解决方案？

---

更新 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>

脚本（不按预期工作。需要审查。）

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

更新：

$('.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

由于royalSlider 正在删除html 代码并添加幻灯片，因此上述操作将不起作用

*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