Question

之前我问过这个问题，我收到的答案对我没用。

我有一个HTML网站，可以选择大约50张图片。点击其中一个时，会打开一个带有幻灯片的模态站点（顶部是大的，下面是小样本）。我希望在JS代码中添加一个小样本后，窗口会自动跳转到页面顶部，样本显示的尺寸更大。

这是我的JS代码：

<script>
    function openModal() {
        document.getElementById('myModal').style.display = "block";
    }

    function closeModal() {
        document.getElementById('myModal').style.display = "none";
    }

    var slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
    showSlides(slideIndex += n);
    }

    function currentSlide(n) {
    showSlides(slideIndex = n);
    }

    function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("demo");
        var captionText = document.getElementById("caption");
        if (n > slides.length) {slideIndex = 1}
        if (n < 1) {slideIndex = slides.length}
        for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex-1].style.display = "block";
        dots[slideIndex-1].className += " active";
        captionText.innerHTML = dots[slideIndex-1].alt;
    }
</script>

我已尝试将window.scrollTo(0, 0);添加到currentSlide(n)功能，只需滚动（0,0），但它无法正常工作。

这里是onclick="currentSlide"所在的位置。我从网上的某处获得了这段代码。

<div class="column"><img class="demo" src="img/gallery/img55.jpg" onclick="currentSlide(55)" alt="Sample 55"></div>
       </div>   <!-- end div modal_samples -->
    </div> <!-- end div modal content -->

如果您需要我提供其他内容，请告诉我。

Answer 1

我不确定你的功能有多远，但你可以使用类似的东西：＆＃34; window.location.hash = null; window.location.hash =＆＃39;（大图像的id属性值）＆＃39 ;;＆＃34;在现有的或新的功能中。

所以，基本上：

//从之前的任何设置重置

window.location.hash = null;

//为包含大图像的IMG元素设置新的SRC（在页面顶部） largeImageElement.src =（图像的URL或与缩略图SRC相同）;

//移动到大图像（IMG）所在的页面

window.location.hash = largeImageElement.id;

如果您不理解，请告诉我。

跳到img gallery中的页面顶部？

1 个答案: