我如何阻止一个页面从滚动到顶部时，在php单击按钮

How do i stop a page from scrolling to the top when button clicked in php?

本文关键字：顶部 滚动 按钮 单击 php 何阻止 一个      更新时间：2023-09-26

当点击添加到购物车按钮时，如何阻止页面滚动到顶部?由于我有很多产品从数据库显示到我的页面，因此将"index.php"刷新到顶部让我感到沮丧。顺便说一句，我遵循这个教程http://www.onlinetuting.com/e-commerce-website-in-php-mysqli-video-tutorials/

PS:我是一个初学者，所以只是帮助我一个例子(在哪里放代码对我来说很重要)。

//index.php(仅限短代码)

<!doctype html>
<?php
include ("functions/functions.php");
?>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="styles/style.css" type="text/css" media="all" />
<script src="js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div class="container">
    <div class="header"></div>
    <div class="navigation">
        <div> <?php getCats(); ?> <?php getBrands(); ?> </div>
        <div> </div>
        <div id="shopping_cart"> <a href="cart.php">Go to Cart</a> <?php total_items(); ?> <?php total_price(); ?> </div>
    </div>
    <div id="content">
        <?php cart(); ?>
        <div id="products"> <?php getPro(); ?> <?php getCatPro(); ?> <?php getBrandPro(); ?> </div>
    </div>
    <div id="footer"></div>
</div> <!--END OF "container" -->
</body>
</html>

//function.php 

<?php
$con = mysqli_connect("localhost","root","","learning-php");
if (mysqli_connect_errno())
  {
   echo "The connection was not established: " . mysqli_connect_error();
  }
//Creating the shopping cart
    function cart(){
    if(isset($_GET['add_cart'])){
        global $con;
        $ip = getIp();
        $pro_id = $_GET['add_cart'];
        $check_pro = "select * from cart where ip_add='$ip' AND p_id='$pro_id'";
        $run_check = mysqli_query($con, $check_pro);
        if(mysqli_num_rows($run_check)>0){  
        }
        else {
        $insert_pro = "insert into cart (p_id,ip_add) values ('$pro_id','$ip')";
        $run_pro = mysqli_query($con, $insert_pro);
        echo "<script>window.open('index.php','_self')</script>";   
        }
    }   
    }

    //Getting the total added items
    function total_items(){
        if(isset($_GET['add_cart'])){
            global $con;
            $ip = getIp();
            $get_items = "select * from cart where ip_add='$ip'";
            $run_items = mysqli_query($con, $get_items);
            $count_items = mysqli_num_rows($run_items);
            }
            else {
            global $con;
            $ip = getIp();
            $get_items = "select * from cart where ip_add='$ip'";
            $run_items = mysqli_query($con, $get_items);
            $count_items = mysqli_num_rows($run_items);
            }
        echo $count_items;
        }

    //Getting the total price of the items in the cart
    function total_price(){     
        $total = 0;
        global $con;
        $ip = getIp();  
        $sel_price = "select * from cart where ip_add='$ip'";   
        $run_price = mysqli_query($con, $sel_price);    
        while($p_price=mysqli_fetch_array($run_price)){
            $pro_id = $p_price ['p_id'];
            $pro_price = "select * from products where product_id='$pro_id'";
            $run_pro_price = mysqli_query($con,$pro_price);
            while($pp_price = mysqli_fetch_array($run_pro_price)){  
            $product_price = array($pp_price['product_price']);
            $values = array_sum($product_price);
            $total +=$values;
            }           
        }       
        echo "$ " . $total;     
    }

    //Getting the categories
    function getCats(){
        global $con;
        $get_cats = "select * from categories";
        $run_cats = mysqli_query($con, $get_cats);
        while ($row_cats=mysqli_fetch_array($run_cats)){
            $cat_id = $row_cats['cat_id'];
            $cat_title = $row_cats['cat_title'];
        echo "<li><a href='index.php?cat=$cat_id'>$cat_title</a></li>";
        }
    }

    //Getting the brands
    function getBrands(){
        global $con;
        $get_brands = "select * from brands";
        $run_brands = mysqli_query($con, $get_brands);
        while ($row_brands=mysqli_fetch_array($run_brands)){
            $brand_id = $row_brands['brand_id'];
            $brand_title = $row_brands['brand_title'];
        echo "<li><a href='index.php?brand=$brand_id'>$brand_title</a></li>";
        }
    }

    //Showing the products
    function getPro(){
        if(!isset($_GET['cat'])){
            if(!isset($_GET['brand'])){
        global $con;
        $get_pro = "select * from products";
        $run_pro = mysqli_query($con, $get_pro);
        while ($row_pro=mysqli_fetch_array($run_pro)){
            $pro_id = $row_pro['product_id'];
            $pro_cat = $row_pro['product_cat'];
            $pro_brand = $row_pro['product_brand'];
            $pro_title = $row_pro['product_title'];
            $pro_price = $row_pro['product_price'];
            $pro_image = $row_pro['product_image'];
            echo "
                    <div id='products'>
                        <h3>$pro_title</h3>
                        <img src='admin_area/product_images/$pro_image' width='135' height='100'/>
                        <div class='details'>
                          <p><div id='prc'>Price:</br><b>$. $pro_price </b></div></p>
                          <p><div id='a2c'><a href='?add_cart=$pro_id'><button style='float:left;'>Add to Cart</button></a></div></p>                     
                          <p><div id='fDtl'><a href='full_details.php?pro_id=$pro_id' style='float:left;'>Full Details</a></div></p>
                        </div>
                    </div>
            ";
        }
        }
    }
    }
    //Showing the products by categories
    function getCatPro(){bla,bla,bla}
    //Showing the products by brands
    function getBrandPro(){bla,bla,bla}
?>

//我的意思是这一行(function.php)div# a2c

//影响到这一行(index.php)div#产品

明白我的意思

通过调用preventDefault来覆盖默认的表单提交，并以ajax调用的方式调用该操作。确保脚本已经加载，比如把它放到head section

参考这个例子:

var element = document.querySelector("form");
element.addEventListener("submit", function(event) {
  event.preventDefault();
  // actual logic, e.g. validate the form
  alert("Form submission cancelled.");
});
<form>
  <button type="submit">Submit</button>
</form>

下面是来自http://www.tutorialspoint.com/jquery/events-preventdefault.htm:

的完整示例
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("a").click(function(event){
               event.preventDefault();
               alert( "Default behavior is disabled!" );
            });
         });
      </script>
   </head>
   <body>
      <span>Click the following link and it won't work:</span>
      <a href = "http://www.google.com">GOOGLE Inc.</a>
   </body>
</html>
相关文章：