Question

我有一个带有标记的谷歌地图，当点击同一页面内的#anchor标签时。一切正常我只是喜欢，当标记点击时，锚点不会跳跃而是平滑滚动。有没有办法实现这个目标？

<script>

    var maps;
    function initialise() 
    {



    var stylez = [
    {
      featureType: "all",
      elementType: "all",
      stylers: [

        { saturation: -100 } // <-- THIS
      ]
    }
];

    var mapOptions = {
    zoom: 8,
    center:  new google.maps.LatLng(10.628216,-61.301394),
     mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'tehgrayz']
}

  } ;
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);       
var mapType = new google.maps.StyledMapType(stylez, { name:"Grayscale" });    
map.mapTypes.set('tehgrayz', mapType);
map.setMapTypeId('tehgrayz');       


    // -------------- MARKER 1
    var marker1 = new google.maps.Marker({
    position: new google.maps.LatLng(10.658562,-61.522754),
    map: map,
    icon: 'images/mapicon.png'
    });


    // MARKER 1'S INFO WINDOW

    var infowindow1 = new google.maps.InfoWindow({
    content: 'University of Trinidad and Tobago <br />John Donaldson Campus<br />'
    });
    // End of infowindow code


        google.maps.event.addListener(marker1, 'click', function() {
  infowindow1.open(map, marker1);
  window.location = "#uttjdc";

});


    // -------- END OF 1st MARKER


    // -------------- MARKER 2
    var marker2 = new google.maps.Marker({
    position: new google.maps.LatLng(10.267817,-61.465055),
    map: map,
    icon: 'images/mapicon.png'
    });

    // MARKER 2'S INFO WINDOW
    var infowindow2 = new google.maps.InfoWindow({
    content: 'National Academy for the Performing Arts<br /> South Campus<br />'
    });
    // End of infowindow code

    // Adding a click event to the marker
    google.maps.event.addListener(marker2, 'click', function() {
    // Calling the open method of the infoWindow
   infowindow2.open(map, marker2);
     window.location = "#uttsapa";
    });
    // -------- END OF 2nd MARKER


    // -------------- MARKER 3
    var marker3 = new google.maps.Marker({
    position: new google.maps.LatLng(11.18257,-60.739463),
    map: map,
        icon: 'images/mapicon.png'

    });

    // MARKER 3'S INFO WINDOW
    var infowindow3 = new google.maps.InfoWindow({
    content: 'University of Trinidad and Tobago<br />Scarborough Campuste'
    });
    // End of infowindow code

    // Adding a click event to the marker
    google.maps.event.addListener(marker3, 'click', function() {
    // Calling the open method of the infoWindow
    infowindow3.open(map, marker3);
      window.location = "#utttobago";
    });
    // -------- END OF 3rd MARKER

    }
            google.maps.event.addDomListener(window, 'load', initialise); // Execute our 'initialise' function once the page has loaded. 
            google.maps.event.addDomListener(window, "resize", function() {
 var center = map.getCenter();
 google.maps.event.trigger(map, "resize");
 map.setCenter(center); 
})
</script>

HTML

<div id="uttsapa">

    <div class="container-fullhub">
    <div class="container">
    <h2 class="hubhead text-center"><img src="images/hubicon.png "> Location 1
    </h2>
    <p class="hubadd text-center">
    Adress 1
    </p>
    </div>

Answer 1

您是否尝试过使用jquery.scrollTo插件？它可以完成你所需要的。

Answer 2

这是http://css-tricks.com/snippets/jquery/smooth-scrolling/

之后的情况

window.location平滑滚动

2 个答案: