smoothscroll目標在某些div

我試圖找到具有smoothscroll效果的元素，當我單擊按鈕，如何如果目標是在div內滾動到目標。smoothscroll目標在某些div

我想這樣，但沒有工作。是否可以滾動，如果其內部的div

$(document).ready(function(){ 
 
    $('button').click(function(){ 
 
    $('.box').animate({ 
 
     scrollTop: $("#find").offset().top 
 
    }, 2000); 
 
    }); 
 
});

.box{ 
 
    clear: both; 
 
} 
 
.left{ 
 
    float: left; 
 
    width: 20%; 
 
    height: 200px; 
 
    overflow-x: hidden; 
 
    background-color: red; 
 
} 
 

 
#find{ 
 
    margin-top: 400px; 
 
} 
 

 
#find p{ 
 
    background-color: green 
 
} 
 

 

 
.right{ 
 
    float: left; 
 
    margin-left: 10px; 
 
    width: 50%; 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
<div class="left"> 
 
    <div id="find"> 
 
    <p>find me</p> 
 
    </div> 
 
</div> 
 
<div class="right"> 
 
    <button>jump</button> 
 
</div> 
 
</div>

來源

2017-08-10 rnDesto

你的邏輯是正確的，你只是滾動錯誤的元素的目標。你需要調用animate()的.left元素，因爲這是它溢出了一句：

$(document).ready(function() { 
 
    $('button').click(function() { 
 
    $('.left').animate({ 
 
     scrollTop: $("#find").offset().top 
 
    }, 2000); 
 
    }); 
 
});

.box { 
 
    clear: both; 
 
} 
 

 
.left { 
 
    float: left; 
 
    width: 20%; 
 
    height: 200px; 
 
    overflow-x: hidden; 
 
    background-color: red; 
 
} 
 

 
#find { 
 
    margin-top: 400px; 
 
} 
 

 
#find p { 
 
    background-color: green 
 
} 
 

 
.right { 
 
    float: left; 
 
    margin-left: 10px; 
 
    width: 50%; 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
    <div class="left"> 
 
    <div id="find"> 
 
     <p>find me</p> 
 
    </div> 
 
    </div> 
 
    <div class="right"> 
 
    <button>jump</button> 
 
    </div> 
 
</div>

來源

2017-08-10 08:31:15

我因子評分我必須選擇父運行效果，感謝建議 – rnDesto

您需要添加scrollTop上.left，如滾動條出現了，而不是.box即overflow-y可見並且可以在.left上滾動而不在.box上。

$(document).ready(function(){ 
 
    $('button').click(function(){ 
 
    var bt = $("#find").offset().top; 
 
    $('.left').animate({ 
 
     scrollTop: bt 
 
    }, 2000); 
 
    }); 
 
});

.box{ 
 
    clear: both; 
 
} 
 
.left{ 
 
    float: left; 
 
    width: 20%; 
 
    height: 200px; 
 
    overflow-x: hidden; 
 
    background-color: red; 
 
} 
 

 
#find{ 
 
    margin-top: 400px; 
 
} 
 

 
#find p{ 
 
    background-color: green 
 
} 
 

 

 
.right{ 
 
    float: left; 
 
    margin-left: 10px; 
 
    width: 50%; 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
<div class="left"> 
 
    <div id="find"> 
 
    <p>find me</p> 
 
    </div> 
 
</div> 
 
<div class="right"> 
 
    <button>jump</button> 
 
</div> 
 
</div>

來源

2017-08-10 08:32:59 frnt

smoothscroll目標在某些div

回答

相關問題