[英]Anchor scroll not working when clicked
好的,我正在创建一个联系人页面,其中有两种具有视差效果的形式。 我想包含一个单击时可滚动到下一个表单的锚。 我已经尝试了很多在stackoverflow上找到的代码,但似乎都无法正常工作。
这是我的HTML:
<div id="contenedorPrincipalContacto" class="col-xs-12" data-type="parallax-section">
<a href="#colera" id="button">Cotizacion</a>
<div class="col-xs-12" id="contenedorContacto" data-type="parallax-section">
//here goes all the form code
</div>
<div id="colera"></div> //this is where I want to go when clicked the anchor
<div class="col-xs-12" id="contenedorCotizacion" data-type="parallax-section">
//here goes all the content of the second form
</div>
<img src="images/ipadContacto.png" id="ipadContacto" alt="">
</div>
这是JavaScript:
app.controller('contactoCtrl', function ($scope, $rootScope, $routeParams, $location, $http, Data)
{
$(document).ready(function(){
$("#button").click(function() {
$('html, body, #vista').animate({
scrollTop: $("#contenedorCotizacion").offset().top
}, 1000);
});
});
});
我已经看过这项工作,并且在小提琴中尝试了一下,但是工作了……我不知道出什么问题了……。
我正在继续另一位程序员的工作,他对此颇有感激:
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/', {
title: 'Home',
templateUrl: 'partials/home.html',
controller: 'homeCtrl'
})
.when('/videos',{
title: 'texts',
templateUrl: 'partials/texts.html',
controller: 'textsCtrl'
})
.when('/estandar',{
title: 'AboutUs',
templateUrl: 'partials/aboutUs.html',
controller: 'aboutUsCtrl'
})
.when('/contacto',{
title: 'Contact',
templateUrl: 'partials/contact.html',
controller: 'contactCtrl'
})
.otherwise({
redirectTo: '/'
});
}])
我不知道有什么问题。 任何帮助表示赞赏。
更新:
我意识到Angular确实确实在“捕捉”每个链接,因此我最终进入了主页……看来我无法使用锚。 我试过像这样使用javascript:
$("#button").click(function(){
var pagina = document.getElementById("vista");
pagina.scrollTo(0,1000);
});
而且仍然无法正常工作。 它给我一个错误:“ contactoCtrl.js:24 Uncaught TypeError:pagina.scrollTo不是一个函数”对于给您带来的不便,我深表歉意,我是编程新手
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/', {
title: 'Home',
templateUrl: 'partials/home.html',
controller: 'homeCtrl'
})
.when('/videos',{
title: 'texts',
templateUrl: 'partials/texts.html',
controller: 'textsCtrl'
})
.when('/estandar',{
title: 'AboutUs',
templateUrl: 'partials/aboutUs.html',
controller: 'aboutUsCtrl'
})
.when('/contacto',{
title: 'Contact',
templateUrl: 'partials/contact.html',
controller: 'contactCtrl'
})
.otherwise({
redirectTo: '/'
});
}])
那段代码就是问题,原来,每当单击链接时,它就会重定向到主页,因此,我不得不寻找另一种滚动方式
您可以忘记导入jquery库吗?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
耶稣Seeya
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.