I have an accordion. I will like to scroll to the anchor name inside the accordion when the anchor link is clicked. Sample url: http://swagatobhatta.com/accordion.html
I am getting an error as in Cannot read property 'top' of undefined
I have looked throughout the google and also here in stackoverflow. I have pretty much applied all the solutions given. Still I can not solve this
code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Testing accordion</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
Hello world
<a href="#anchor1">Anchor 1</a>
<br/>
<a href="#anchor2">Anchor 2</a>
<div>
Enthusiastically reconceptualize wireless technologies rather than pandemic e-business. Collaboratively deliver cross functional core competencies after economically sound services. Proactively build resource maximizing human capital before client-centric best practices. Efficiently simplify multifunctional functionalities and team building materials. Credibly morph cross-media partnerships without diverse quality vectors.</div>
<div class="accordionModule ">
<h3 class="title"> Credibly initiate market positioning e-commerce after web-enabled core competencies. Dramatically. </h3>
<div class="panels">
<div class="accordionPanel"> <a href="#" class="trigger">
<h4 class="accordionTitle">Loreum 1</h4>
</a>
<div class="content richTextModule">
<p>Efficiently evolve bricks-and-clicks human capital for focused intellectual capital. Compellingly brand state of the art information vis-a-vis backend channels. Appropriately empower high-payoff schemas whereas bricks-and-clicks processes. <a name="globally"></a>Globally drive resource sucking leadership and wireless products. Assertively monetize viral testing procedures without bleeding-edge e-markets.</p>
</div>
</div>
<div class="accordionPanel"> <a href="#" class="trigger">
<h4 class="accordionTitle">Test Links</h4>
</a>
<div class="content richTextModule">
<p>This is an external link to<a href="http://swagatobhatta.com/accordion.html">Where am i</a></p>
<p> </p>
<p>My</p>
</div>
</div>
<div class="accordionPanel"> <a href="#" class="trigger">
<h4 class="accordionTitle">Internal anchor test</h4>
</a>
<div class="content richTextModule">
<p>This is <a href="http://swagatobhatta.com/accordion.html">internal anchor test</a></p>
<p><a name="anchor1"></a>anchor </p>
</div>
</div>
<div class="accordionPanel"> <a href="#" class="trigger">
<h4 class="accordionTitle">Anchor inside</h4>
</a>
<div class="content richTextModule">
<p> </p>
<p> </p>
<p>Hello <a name="anchor2"></a>world</p>
<p> </p>
<p> </p>
</div>
</div>
</div>
</div>
<div>
Interactively brand professional convergence vis-a-vis just in time niches. Credibly seize wireless channels rather than corporate intellectual capital. Seamlessly recaptiualize customer directed products without cross functional supply chains. Rapidiously administrate progressive technology before cross functional core competencies. Objectively orchestrate integrated total linkage before dynamic schemas.
Enthusiastically reconceptualize wireless technologies rather than pandemic e-business. Collaboratively deliver cross functional core competencies after
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
(function (_this, $) {
_this.accordionSpeed = 400;
_this.initialise = function () {
$(function () {
bindAccordionTriggers();
});
return _this;
}
var bindAccordionTriggers = function() {
$('.accordionModule .accordionPanel .trigger').on('click', function(e) {
e.preventDefault();
var $parentPanel = $(this).parents('.accordionPanel');
if( $parentPanel.hasClass('open') ) {
$parentPanel.removeClass('open');
$parentPanel.find('.content').slideUp(_this.accordionSpeed);
}
else {
var $module = $(this).parents('.accordionModule');
if($module.hasClass('open-single-only')) {
var $openPanel = $module.find('.accordionPanel.open');
$openPanel.find('.content').slideUp();
$openPanel.removeClass('open');
}
$parentPanel.find('.content').slideDown(_this.accordionSpeed);
$parentPanel.addClass('open');
}
});
function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
$(window).on('load hashchange',function(event){
var hash = window.location.hash;
var hashName = hash && hash.replace('#','');
event.preventDefault();
if (hashName) {
//document.getElementsByName ("#anchor1").scrollIntoView();
scrollToAnchor('hashName');
$('.accordionModule .accordionPanel .content a').filter(function(){
//return this.hash === hash;
return this.name === hashName;
}).closest('.accordionPanel').find('.trigger').click()
}
});
}
// Initialise & assign to global scope
window.AccordionModule = _this.initialise();
})(window.AccordionModule || {}, jQuery);
</script>
</body>
</html>
aTagis what you are expecting.