滚动到下一个<div>使用css :: after元素使用jQuery

时间：2017-03-24 06:04:55

标签： javascript jquery html css wordpress

我正在尝试滚动到下一个div我不确定jQuery因为我不是那么专家所以我想通过单击向下箭头滚动到下一个div。有人可以帮帮我吗？

＆＃13;
＆＃13; 
jQuery(document).ready(function(){
  jQuery('sub-div::after').click(function(){
    jQuery(this).closest().next('sub-div').toggle();
  });
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：0)

尝试使用scrollTop()和Animate()

  
      
  1. sub-div是类名，因此请.sub-div。
    2.   

  2. 使用scrollTop onclick与sub-div一起找到下一个div   top。然后身体滚动到那个位置。

    3.   

  3. 并且pseudo element也没有使用此click function.so   尝试使用 children 元素进行向下箭头

    4.   

＆＃13;
＆＃13; 
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);
  });
 
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

通过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>

答案 2 :(得分：0)

伪元素根本不是DOM的一部分，所以你不能将任何事件直接绑定到它们，你只能绑定到它们的父元素。最好附加一个元素并将click事件绑定到它。请看下面的代码段

＆＃13;
＆＃13; 
$(document).ready(function(){

  $(".sub-div").each(function(){
    $(this).append("<span></span>").click(function(){ 
     $('html,body').animate({ scrollTop:$(this).next().offset().top}, 'slow')
    });
  })
 
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

单击div时，这将使其成为下一个div。

＆＃13;
＆＃13; 
$(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);
    }
    });
  })
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题