javascript – 在更改图像或重新加载页面时将页面保留在一个位置？

2023年3月8日 206次阅读

我已经检查了这个网站同样的问题,但我不想在没有页面重新加载的情况下更改这个项目的图像 – 它需要重新加载.虽然当我点击下一个或上一个按钮时,页面会再次向右跳到顶部,但是有一种方法可以解决这个问题,这样当用户点击下一个图像时,页面会重新加载屏幕上的图像,而不是用户每次都要向下滚动？这是我的脚本：

$albumName = "Our Gallery"; // Name your album!

/*
 * Installation:
 * 1.) Place your photos into the images directory.
 *      - Photos will be displayed in alphabetical order.
 * 2.) Rename the "basic-php-photo-album" folder to anything you wish.
 *      - Example: paris-photo-album
 * 3.) Upload the renamed folder and all of its contents to your server.
 *      
 * That's it! Make multiple albums by repeating the above 3 steps.
 */

/*
 * You shouldn't need to change anything beyond this.
 *
 */

$p = $_GET['p'];
if ($handle = opendir("uploads")) {
    $i = 1;
    while (false !== ($file = readdir($handle))) {
        if ($file != "." && $file != "..") {
            $img[$i] = $file;
            if ($p == $img[$i]) {
                $ci = $i;
            }
            $i++;
        }
    }
    closedir($handle);
    $ti = $i - 1;
    $pi = $ci - 1;
    if ($p == "") {
        $ni = $ci + 2;
    } else {
        $ni = $ci + 1;
    }
    $prevNext = "";
    if ($pi > 0) {
        $piFile = $img[$pi];
        $prevNext .= "<a href=\"" . $_SERVER['PHP_SELF'] . "?p=" . $piFile . "\" title=\"Previous image\">Previous &#171</a>";
    } else {
        $prevNext .= "&#171;";
    }
    $prevNext .= " | ";
    if ($ni <= $ti) {
        $niFile = $img[$ni];
        $prevNext .= "<a href=\"" . $_SERVER['PHP_SELF'] . "?p=" . $niFile . "\" title=\"Next image\">&#187 Next</a>";
    } else {
        $prevNext .= "&#187;";
    }
    if ($p == "") {
        $p = $img[1];
    }
}
?> 

<!DOCTYPE HTML>
<html>
<head>
<title>Dave's Caravan Lettings</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="Hire our Deluxe Plus Caravan based in Sandy Bay, Exmouth for an easy, great priced family holiday! Comes complete with all required facilities as standard!">
<meta name="keywords" content="Haven,Holidays,Sandy,Bay,Devon,Cliffs,Exmouth,Beach,Caravan,Hire,Rental,Rent,Cheap,Holiday,Family,Entertainment,Daves,Letting,Lettings,Fun,Best,Stay,Nights,Price,Buy">
<meta name="author" content="BaseEnterprises WebDesign">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no">
    <style type="text/css">

        td, select, input {
            font-family: arial, helvetica, sans-serif;
            font-size: 11px;
        }


        .hRule {
            border-top: 1px solid #cdcdcd;
            margin: 0px 0px 10px 0px;
        }

        img {
            border: 1px solid #333333;
        }

        .nextPrevious {
            font-size: 18px;
            color: #cdcdcd;
            padding-bottom: 15px;
        }

        a, a:visited {
            color: #cc0000;
            text-decoration: none;
        }
        a:active, a:hover {
            color: #cc0000;
            text-decoration: underline;
        }
    </style>
<link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="header-bg">
    <div class="wrap">
        <div class="header">
            <div class="logo">
                <h1><a href="index.html">Dave's Caravan Lettings</a></h1>
            </div>
        </div>
        <div class="header-bot">
            <div class="menu">
                <ul>
                    <li class="home"><a href="index.html">Home</a></li>
                    <li class=""><a href="location.html">Location</a></li>
                    <li class=""><a href="facilities.html">Facilities</a></li>
                    <li class=""><a href="availability.php">Availability</a></li>
                    <li class=""><a href="contact.html">Contact Us</a></li>
                </ul>
                <div class="clear"></div>
            </div>
        </div>
    </div>
    <div class="banner">
        <div class="wrap">
            <span class="banner-img">
                <img src="images/banner2.jpg" alt=""/>
            </span>
        </div>
    </div>
</div>
<div class="main">
 <div class="wrap">
     <div class="content-bot">
                <h3><?php echo $albumName; ?></h3>
                <p>Images sent to us by previous holiday makers staying in our Caravan... See what it's like yourself by browsing the images below...</p><br></br>
                <div class="inner-top">
                    <div class="section group" align="center">



                <div class="hRule"></div>

<table border="0" cellpadding="0" cellspacing="0" align="center">
    <tr align="center">
        <td class="nextPrevious"><?php echo $prevNext; ?></td>
    </tr>
    <tr align="center">
        <td><img src="uploads/<?php echo $p; ?>" alt="<?php echo $$albumName; ?>" border="0" height="300px" width="400px"></td>
    </tr>
</table>






            </div>
            </div>
                <div class="clear"></div>
            </div>

最佳答案 如果您想自动向右滚动到底部,具体取决于图像的大小 – 您可以使用以下内容：

$(".section group").animate({ scrollTop: $(document).height() }, "fast");
  return false;

然后将其添加到您的页面：

<div class="section group" align="center" style="overflow-y: scroll;height:520px;width:520px 240px">

然后你要做的就是摆弄宽度和高度属性,直到它们符合你的设计.

点赞