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

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

1 个答案: