使用功能

Question

的royalslider API具有能對一個事件觸發rsSlideClick功能平滑滾動到URL上的點擊事件。

它看起來像這樣：

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> 

SCRIPT（不工作按預期需要經過審覈。）

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