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

【问题标题】：Scroll to next <div> Using jQuery using css ::after element滚动到下一个 <div> 使用 jQuery 使用 css ::after 元素
【发布时间】：2017-03-24 06:04:54
【问题描述】：

我正在尝试滚动到下一个 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>

【问题讨论】：

使用 id 到 div 并使用该特定图标调用 id，无需使用任何其他东西！
如您所见，我在所有 <div> 上添加图标，每个图标都是由 CSS @user7357089 我如何将每个图标链接到图标旁边的不同 div 的？
你可以为每个div添加图标，或者你想通过这个单一的代码来实现吗？

标签： javascript jquery html css wordpress

【解决方案1】：

伪元素根本不是 DOM 的一部分，因此您不能将任何事件直接绑定到它们，您只能绑定到它们的父元素。最好附加一个元素并将点击事件绑定到它。看看下面的sn-p

$(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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

这将使它在单击 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>

【讨论】：

【解决方案4】：

试试scrollTop() 和Animate()

sub-div 是类名，所以用.sub-div 提及。

并使用scrollTop onclick 和sub-div 找到下一个 div top。然后身体滚动到那个位置。

还有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>

【讨论】：