滾動到包裝內部的div而不是包裝

我使用的是http://www.dconnell.co.uk/blog/index.php/2012/03/12/scroll-to-any-element-using-jquery/的jQuery代碼滾動到包裝中的包裝。滾動到包裝內部的div而不是包裝

該代碼提供動畫身體（滾動身體下onClick）我試圖動畫滾動裏面的div，而不是身體。

我下面的代碼：

HTML：

<a href="#Div3" class="ScrollDown">Scroll Down</a> 

    <div class="Wrapper" style="height:400px; width:600px; overflow:hidden;"> 
     <div id="Div1" style="height:200px; width:600px;"></div> 
     <div id="Div2" style="height:200px; width:600px;"></div> 
     <div id="Div3" style="height:200px; width:600px;"></div> 
    </div>

jQuery的

function scrollToElement(selector, time, verticalOffset) { 
    time = typeof(time) != 'undefined' ? time : 1000; 
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0; 
    element = $(selector); 
    offset = element.offset(); 
    offsetTop = offset.top + verticalOffset; 
    $('html, body').animate({ 
     scrollTop: offsetTop 
    }, time); 
} 

$(document).ready(function() { 
    $('a.ScrollDown').click(function (e) { 
    e.preventDefault(); 
    scrollToElement('#Div3'); 
    }); 
});

我知道它是與$（ 'HTML，身體'）動畫（{} ）但我不知道如何改變它。

感謝

的jsfiddle http://jsfiddle.net/3Cp5w/1/

來源

2014-01-16 Dale

你包括jquery.min.js文件，我測試了它藉機d對我來說，你能顯示完整的代碼 – sanjeev

是的，我有。 Heres小提琴http://jsfiddle.net/3Cp5w/1/ – Dale

動畫包裝，而不是身體：

$('.Wrapper').animate({ 
    scrollTop: offsetTop 
}, time);

http://jsfiddle.net/robbyn/qU6F7/1/

來源

2014-01-16 09:32:48

加入jQuery的更新文件參考

<script src="http://code.jquery.com/jquery-1.10.2.js" />

來源

2014-01-16 09:31:40

試試下面的代碼

<body>  
<a href="#Div3" class="ScrollDown">Scroll Down</a> 

    <div class="Wrapper" style="height:200px; width:600px; overflow:scroll;"> 
     <div id="Div1" style="height:200px; width:600px;background-color:red;" ></div> 
     <div id="Div2" style="height:200px; width:600px;background-color:green;" ></div> 
     <div id="Div3" style="height:200px; width:600px;background-color:yellow;" ></div> 
    </div> 
</body> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript"> 

function scrollToElement(selector, time, verticalOffset) { 
    time = typeof(time) != 'undefined' ? time : 1000; 
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0; 
    element = $(selector); 
    offset = element.offset(); 
    offsetTop = offset.top + verticalOffset; 
    $('.Wrapper').animate({ 
     scrollTop: offsetTop 
    }, time); 
} 

$(document).ready(function() { 
    $('a.ScrollDown').click(function (e) { 
    e.preventDefault(); 
    scrollToElement('#Div3'); 
    }); 
}); 
</script>

我想你想DIV3向下內包裝

您需要先指定包裝的高度少數滾動，使滾動可見 & 爲你猜改變HTML，身體.Wrapper

就求人

來源

2014-01-16 09:33:41 sanjeev

滾動到包裝內部的div而不是包裝

回答

相關問題