如何使用JavaScript和PHP滚动到下一个div？

Question

First of all: I have already asked this question: How to scroll to next div using Javascript? 首先：我已经问过这个问题：如何使用Javascript滚动到下一个div？

But this was only using javascript, with a static page. 但这只是使用带有静态页面的javascript。

Now I have a dynamic page that loads data from my database. 现在，我有一个动态页面，可从数据库中加载数据。

PHP: PHP：

<html>
<head>
<title>Page</title>
<link rel="stylesheet" href="main.php">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<script src="jquery.min.js"></script>
<script src="main.js"></script>
</head>

<body>


<?php
//DB connection

$db_hostname = "localhost";
$db_username = "root";
$db_password = "";
$db_db = "php_testing";

$conn = new mysqli($db_hostname,$db_username,$db_password,$db_db);

$sql = "SELECT * FROM podaci";
$result = $conn->query($sql);

//print_r($result);die;
if ($result->num_rows > 0) {
    // Show each data returned by mysql
    while($row = $result->fetch_assoc()) {
  ?>

<div class="conteiner active">

  <div class="g name">
    <i class="fas fa-user"></i>
    <h class="ime"><?= $row['ime'] ?>
    <?= $row['prezime'] ?>
    </h>
  </div>

    <div class="g date">
    <i class="fas fa-calendar-alt"></i>
    <h class="ime"><?= $row['datum_rodjenja'] ?></h>
  </div>

      <div class="g school">
    <i class="fas fa-school"></i>
    <h class="ime"><?= $row['skola'] ?></h>
  </div>

        <div class="g movie">
    <i class="fas fa-film"></i>
    <h class="ime"><?= $row['omiljeni_film'] ?></h>
  </div>

  <div class="g address">
    <i class="fas fa-map-marker-alt"></i>
    <h class="ime"><?= $row['adresa'] ?></h>
  </div>

  <div class="g uspjeh">
    <i class="fas fa-marker"></i>
    <h class="ime"><?= $row['uspijeh'] ?></h>
  </div>

  <div class="g jelo">
    <i class="fas fa-utensils"></i>
    <h class="ime"><?= $row['omiljeno_jelo'] ?></h>
  </div>

  <div class="g pjesma">
    <i class="fas fa-music"></i>
    <h class="ime"><?= $row['omiljena_pjesma'] ?></h>
  </div>

        <button class="next">NEXT</button>
</div>

 <?php
   }
 } else {
   echo "0 results";
 }

 $conn->close();
?>
</body>
</html>

Here's what my website looks like for now. 这是我的网站目前的样子。 .conteiner is set to take height: 100vh .conteiner设置为height: 100vh

I have added main.js file to make it so when I click NEXT button it scrolls to next .conteiner 我已经添加了main.js文件，因此当我单击NEXT按钮时，它将滚动到下一个.conteiner

JAVASCRIPT: JAVASCRIPT：

$(".next").click(function() {
  var $target = $('.conteiner.active').next('.conteiner');
  if ($target.length == 0)
    $target = $('.conteiner:first');

  $('html, body').animate({
    scrollTop: $target.offset().top
  }, 'slow');

});

Answer 1

In your PHP change 在您的PHP更改中

while($row = $result->fetch_assoc()) {
?>

<div class="conteiner active">

to 至

$first = true;
while($row = $result->fetch_assoc()) {
?>

<div class="conteiner <?php if ($first) {$first = false; echo 'active';} ?>">

And in your JS : 在您的JS中：

$(".next").click(function() {
  var $active = $('.conteiner.active');
  var $target = $active.next('.conteiner');

  if ($target.length == 0)
    $target = $('.conteiner').first();

  $active.removeClass('active');
  $target.addClass('active');
  $('html, body').animate({
    scrollTop: $target.offset().top
  }, 'slow');

});

如何使用JavaScript和PHP滚动到下一个div？

问题描述

1 个解决方案

解决方案1
0 2019-03-03 21:05:29

如何使用JavaScript和PHP滚动到下一个div？

问题描述

1 个解决方案

解决方案1 0 2019-03-03 21:05:29

解决方案1
0 2019-03-03 21:05:29