窗口位置平滑滚动

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/之后可能的样子