Question

我有5-10个链接都具有相同的类/

<a class="content-link" href="/profile/about-me/<? echo $row['username'];?>/">

我想要实现的是当用户点击此链接时，然后使用javascript将用户导航到#profile-body div。

与此post非常相似但唯一的区别在于，不需要将我希望用户导航到的div在href中导航到<a href="#profile-body">，我需要通过javascript，以便我在href中的链接实际加载。

提前感谢您提供任何帮助。

Answer 1

我知道你正在寻找一个Javascript解决方案，但万一你愿意使用Jquery这是一个很好的解决方案。

$(document).ready(function() {
  $('.content-link').click(function(e) {
    e.preventDefault();

    $('html, body').animate({
      scrollTop: $('#profile-body').offset().top
    }, 500);
  });
});

Answer 2

没有理由使用jQuery（除非你已经使用它），这是一个完整的vanilla方法。设置哈希值是可选的。

基本上，此脚本包含在新页面中，您手动设置哈希值，然后只需切换offsetTop。

var HomeModule = angular.module('HomeModule', []);

HomeModule.controller('HomeController', ['$scope', 'someFactory', function($scope, someFactory) {
  someFactory.GetSomeData().then(function(result) {
    $scope.data = result.data;
  }, function(err) {
    console.log(err);
  });
}]);

HomeModule.factory('someFactory', ['$http', function($http) {
  var service = {
    GetSomeData: function() {
      return $http.post('/Some/SomeMethod');
    },
  };
  return service;
}]);

.service('SocketService', function ($http,$rootScope,$q) {
  var _this = this;    
  this.chatController = null;
  this.registerCtrlr = function (ctrlr) {
    _this.chatController = ctrlr;
  };
  this.unRegisterCtrlr = function () {
    _this.chatController = null;
  };

  this.connect = function(){
    var socket = io();
    socket.on('connect',function(){
      // Call chatController.someFunction if chatController exists
      if (_this.chatController) {
        _this.chatController.someFunction();
      }
    });
  };
});

.controller('ChatController',['SocketService', '$scope', function(SocketService, $scope){
  SocketService.registerCtrlr(this);
  //-- make sure controller unregisters itself when destroyed - need $scope for this
  $scope.$on('$destroy', function () {
    SocketService.unRegisterCtrlr();
  });
  this.someFunction = function(){
    // Some Code Here
  }
}]);

(function() {
    window.location.hash = "three";
    document.getElementById('three').offsetTop + "px";
})();

Answer 3

这样做的简单方法是通过JQuery：

$(".content-link").click(function () {
    $('html,body').animate({ scrollTop: $(this.hash).offset().top }, 400);
});

有了这个，你的所有.content.link href都被控制了。

无论如何，值得一看flesler/jquery.scrollTo

Answer 4

也可以使用纯CSS完成。

＆＃13;

body {
  background: #999
}
.mylinks a {
  text-decoration: none;
  color: black;
  display: inline-block;
  padding: 2%;
  background: #444;
  color: #999;
}
.mycooldiv {
  background: red;
  width: 100%;
  height: 400px;
  margin-bottom: 30%;
  box-shadow: inset 0 0 10px 200px rgba(0, 0, 0, 0.55);
}
#profile-section1 {
  background: red;
  bottom: 100%
}
#profile-section2 {
  background: blue;
  bottom: 200%
}
#profile-section3 {
  background: green;
  bottom: 300%
}
#profile-section4 {
  background: yellow;
  bottom: 400%
}

＆＃13;

<body>
  <div class="mylinks">
    <a class="content-link" href="#profile-section1">section 1 </a>
    <a class="content-link" href="#profile-section2">section 2 </a>
    <a class="content-link" href="#profile-section3">section 3 </a>
    <a class="content-link" href="#profile-section4">section 4 </a>
  </div>
  <div class="mycooldiv" id="profile-section1"></div>
  <div class="mycooldiv" id="profile-section2"></div>
  <div class="mycooldiv" id="profile-section3"></div>
  <div class="mycooldiv" id="profile-section4"></div>
</body>

＆＃13;

一个href类滚动到div

4 个答案: