光滑滾動到聚合物元素中的div

我正在使用聚合物1.0工具來構建web應用程序，並且無法順利滾動到特定的div。我有成功使用聚合物方法這個。$。div.scrollIntoView（），但它只是移動到特定的div沒有滾動到它。我想使用jQuery方法scrollTop（），但似乎無法確定何時觸發此功能，以及何時/如何將此功能附加到造紙廠。以下是我迄今爲止：光滑滾動到聚合物元素中的div

<div align="center"> 
    <paper-fab icon="arrow-downward" id="fab" on-click="scrollToView"></paper-fab> 
</div>

這裏是我的腳本，在這個特定的聚合物元件的底部：

<script> 
    Polymer({ 
     is: 'my-view', 
     scrollToView: function() { 
      this.$.parallax.scrollIntoView(false); 
     } 
    }); 
</script> 
<script type="text/javascript"> 
    function goToByScroll() { 
     $('html, body').animate({ 
      scrollTop: $("#section_one_cont").offset().top}, 'slow'); 
    } 
    $("#fab").click(function(e) { 
      goToByScroll(); 
    }) 
</script>

所以第一個「聚合物」的腳本是實際可行的，但不一個吸引人的方式，然後如果我只嘗試使用jQuery腳本，他們什麼也不做。

這是jQuery的CDN我使用：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

任何和所有幫助表示讚賞，我真的想弄清楚如何使用聚合物分子內的非聚合物腳本，這將開闢數更多的事情我想用這個來實現。提前致謝！

來源

2016-09-20 Nicholas Pesa

我想了好幾個小時找到我自己的項目的解決方案（最好不要求JQuery）。不幸的是，所有選項都伴隨着一個轉折。

scrollIntoView()

隨着scrollIntoView可以定義哪些可以設置爲平滑，即時或自動行爲。問題在於scrollIntoView中定義的scrollIntoViewOptions只支持Firefox。

element.scrollIntoView({block: "end", behavior: "smooth"});

scroll-behavior

我的人願意這樣的解決方案。因爲它只是一個簡單的CSS代碼片段。但是，類似於上面的例子，並不是所有的瀏覽器都支持它，Chrome和Opera只有在啓用實驗性Web平臺功能時才支持它。這並不能真正幫助你的用戶。

scroll-behavior: smooth;

來源

2016-12-20 20:59:24 Niklas

感謝您的回答，我偏離使用聚合物太多，因爲我沒有使用它提供的所有功能，我只是創建靜態頁面。儘管如此，我總是很欣賞任何有關實現這一目標的見解。 –

光滑滾動到聚合物元素中的div

回答

相關問題