滾動到下一個 <div> 使用jss使用css :: after元素

Question

我正在嘗試滾動到下一個div我不確定jQuery，因為我不是那么專家所以我想通過單擊向下箭頭滾動到下一個div。 誰能幫幫我嗎？

 jQuery(document).ready(function(){ jQuery('sub-div::after').click(function(){ jQuery(this).closest().next('sub-div').toggle(); }); }); 

 .sub-div{ height:50px; width:100%; padding-bottom:12px; } .main-div .sub-div::after{ content: "\\f078"; font-family: "FontAwesome"; position: relative; bottom: -20px; left: 0; right: 0; margin: 0 auto; text-align: center; } .main-div .sub-div:hover::after{ cursor:pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> <div class="main-div"> <div class="sub-div"> Some Content Here... </div> <div class="sub-div"> Some Content Here... </div> <div class="sub-div"> Some Content Here... </div> <div class="sub-div"> Some Content Here... </div> </div> 

Answer 1

嘗試使用scrollTop()和Animate()

1. sub-div是類名，所以提到.sub-div 。

2. 並使用scrollTop onclick with sub-div它找到下一個div top 。然后身體滾動到那個位置。

3. 並且還有pseudo element不能使用此單擊函數。所以嘗試使用children元素進行向下箭頭

 jQuery(document).ready(function() { jQuery('.sub-div p').click(function() { var tops = (jQuery(this).parent().next('.sub-div').position() == undefined)? 0: jQuery(this).parent().next('.sub-div').position().top; $('body').animate({ scrollTop :tops },1000); }); }); 

 .sub-div { height: 100px; width: 100%; padding-bottom: 12px; word-wrap:break-word; margin:20px auto; } p{ position: relative; top: 0px; left: 0; right: 0; cursor:pointer; color:green; font-weight:bold; margin: 0 auto; text-align: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> <div class="main-div"> <div class="sub-div"> 1st Content Here.. <p class="fa fa-angle-down"><p> </div> <div class="sub-div"> 2nd Content Here... <p class="fa fa-angle-down"><p> </div> <div class="sub-div"> 3rd Content Here... <p class="fa fa-angle-down"><p> </div> <div class="sub-div"> 4th Content Here... <p class="fa fa-angle-down"><p> </div> </div> 

Answer 2

通過HTML滾動到特定div簡單

 .main-div{ height: 10px; } .sub-div { height: 100px; width: 50%; padding-bottom: 12px; } .main-div .sub-div::after{ content: "\\f078"; font-family: "FontAwesome"; position: relative; bottom: -2px; left: 0; right: 0; margin: 0 auto; text-align: center; } .main-div .sub-div:hover::after{ cursor:pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> <div class="main-div" > <div class="sub-div" id="first"> <p>asdfasdfasdfasdfasdfasdfasdfasdf asdfasdfasdfasdfasdfasdfasdfasd asdfasdfasdfasdfasdfasdfa asdfasdfasdf</p> <a href="#sec">click here</a> </div> <div class="sub-div" id="sec"> <p>asdfasdfasdfasdfasdfasdfasdfasdf asdfasdfasdfasdfasdfasdfasdfasd asdfasdfasdfasdfasdfasdfa asdfasdfasdf</p> <a href="#third">click here</a> </div> <div class="sub-div" id="third"> <p>asdfasdfasdfasdfasdfasdfasdfasdf asdfasdfasdfasdfasdfasdfasdfasd asdfasdfasdfasdfasdfasdfa asdfasdfasdf</p> <a href="#fourth">click here</a> </div> <div class="sub-div" id="fourth"> <p>asdfasdfasdfasdfasdfasdfasdfasdf asdfasdfasdfasdfasdfasdfasdfasd asdfasdfasdfasdfasdfasdfa asdfasdfasdf</p> <a href="#first">click here</a> </div> </div> 

Answer 3

偽元素根本不是DOM的一部分，所以你不能直接將任何事件綁定到它們，你只能綁定到它們的父元素。 最好附加一個元素並將click事件綁定到它。 看看下面的片段

 $(document).ready(function(){ $(".sub-div").each(function(){ $(this).append("<span></span>").click(function(){ $('html,body').animate({ scrollTop:$(this).next().offset().top}, 'slow') }); }) }); 

 .sub-div{ height:500px; width:100%; padding-bottom:12px; } .main-div .sub-div span::after{ content: "\\f078"; font-family: "FontAwesome"; position: relative; bottom: -20px; left: 0; right: 0; margin: 0 auto; text-align: center; } .main-div .sub-div span:hover::after{ cursor:pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> <div class="main-div"> <div class="sub-div"> 1. Some Content Here... </div> <div class="sub-div"> 2. Some Content Here... </div> <div class="sub-div"> 3. Some Content Here... </div> <div class="sub-div"> 4. Some Content Here... </div> </div> 

Answer 4

這將使它在單擊div時進入下一個div。

 $(document).ready(function(){ $(".sub-div").each(function(){ $(this).append("<span></span>").click(function(){ if($(this).next().is(".sub-div")){ var target = $(this).next(".sub-div"); $('html, body').animate({ scrollTop: target.offset().top }, 2000); } }); }) }); 

 .sub-div{ padding-bottom:12px; } .main-div .sub-div span::after{ content: "\\f078"; font-family: "FontAwesome"; position: relative; bottom: -20px; left: 0; right: 0; margin: 0 auto; text-align: center; } .main-div .sub-div span:hover::after{ cursor:pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> <div class="main-div"> <div class="sub-div"> Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here... </div> <div class="sub-div"> Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here... </div> <div class="sub-div"> Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here... </div> <div class="sub-div"> Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here...Some Content Here... </div> </div>