的JavaScript

Question

我已经检查了这个网站是否有同样的问题，但是我没有在没有页面重新加载的情况下更改此项目上的图像 - 它需要重新加载。虽然当我单击next或previous按钮时，页面会再次跳到顶部，但有没有办法对抗它，以便当用户单击下一个图像时页面重新加载屏幕上的图像而不是用户每次都要向下滚动？这是我的剧本：

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

Answer 1

如果您想自动向右滚动到底部，具体取决于图片的大小 - 您可以使用以下内容：

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

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

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

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

Answer 2

的JavaScript

获取当前滚动：
document.documentElement.scrollTop + document.body.scrollTop
并将其添加到重新加载的页面，以便滚动到与原来相同的位置。

Answer 3

我会尝试将滚动位置传递到下一页，然后使用javascript恢复该设置。我的例子包括jQuery，让生活更轻松。简单的Javascript可能会涉及一些跨浏览器兼容性的麻烦。

您可以在<head>部分插入此（已测试）示例代码：

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
    $(function() {
        // set scroll position to the previous state, only if it was given
        <?php if( isset($_GET['scrollTop']) ) {
           echo "$('body').scrollTop(" . $_GET['scrollTop'] . ");";
        } ?>
        // append current scroll position parameter to the link
        $('.nextPrevious').on('click', 'a', function(e) {
            e.preventDefault();
            document.location.href = $(this).attr('href') + '&scrollTop=' + $('body').scrollTop();
        });
    });
</script>

如果您已在页面中使用jQuery，则无需再次包含它。

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

3 个答案:

的JavaScript