如何在谷歌地图标记上将鼠标悬停在滚动窗口答案

【问题标题】：How to scroll window on mouse over on google map marker如何在谷歌地图标记上将鼠标悬停在滚动窗口
【发布时间】：2019-07-21 11:07:09
【问题描述】：

我正在尝试滚动或滚动到谷歌地图标记上鼠标悬停时的特定 div。我第一步失败了。

这是我正在使用的代码的初始形状，警报正在工作，但窗口没有滚动。

marker.addListener('mouseover', function() {
    window.scrollTo(0,0);
    //alert(id);
});

marker.addListener('mouseover', function() {
    $('html, body').animate({
        scrollTop: $('html, body').offset().top
    }, 2000);
})

;

我的问题是它为什么不滚动？

没有错误，但代码不起作用。

【问题讨论】：

请创建一个独立的代码示例来演示该问题。例如，codepen 或代码沙盒。

标签： javascript google-maps scroll mouseover markers

【解决方案1】：

请尝试this working jsbin 来查看您正在尝试实现的工作示例。首先向下滚动页面，您会看到一张地图；将鼠标悬停在标记上，窗口将滚动回页面顶部。代码如下。

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        html,
        body {
            height: 1600px;
        }

        body {
            position: relative;
        }

        #map-wrapper {
            width: 100%;
            position: absolute;
            bottom: 0;
        }

        #map {
            height: 400px;
        }
    </style>
</head>

<body>
    <h2>This is the top of the page</h2>
    <h3> Scroll down the page to see a Google map <i style="font-size:24px;" class="fa">&#xf063;</i></h3>

    <div id="map-wrapper">
        <h3>This is the map placed at the bottom of the page</h3>
        <h3>Mouse over the marker to go back to the top</h3>
        <div id="map"></div>
    </div>

    <script>
        function initMap() {
            var uluru = { lat: -25.344, lng: 131.036 };
            var map = new google.maps.Map(
                document.getElementById('map'), { zoom: 4, center: uluru });
            var marker = new google.maps.Marker({ position: uluru, map: map });

            marker.addListener('mouseover', function() {
                $('html, body').animate({
                    scrollTop: $('html, body').offset().top
                }, 1000);
                // You can use window.scrollTo(0, 0) instead if you prefer
                // window.scrollTo(0, 0);
            })
        }
    </script>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=&libraries=places&callback=initMap" async defer></script>
</body>

</html>

希望这有助于为您指明正确的方向！

【讨论】：

谢谢，@evan 您的评论回答解决了这个问题。
谢谢，很高兴能帮上忙！ :)