SmoothScroll not working with Table nav
Question
I have being trying to get my anchor points to smoothly scroll but it isn't working. I have always used the script Smoothscroll.js, but this is failing to work on this site? I have tried using many other script to get the action to work but nothing is working. Any ideas on getting the Smoothscroll to work?
Thanks
<head>
<body>
<main>
<div class="main">
<div class="P1" id="P1">
<div id="P1A">
<a name="P1A"></a>
</div>
<div id="P1heading" <h1>UponAuto</h1>
</div>
</div>
<div class="P2" id="P2">
<div id="P2A">
<a name="P2A"></a>
</div>
<div id="P2holding"></div>
</div>
<div class="P3" id="P3">
<div id="P3A">
<a name="P3A"></a>
</div>
</div>
<div class="P4" id="P4">
<div id="P4A">
<a name="P4A"></a>
</div>
<div id="P4holding"></div>
</div>
<div class="P5" id="P5">
<div id="P5A">
<a name="P5A"></a>
</div>
</div>
</main>
<nav id="nav">
<div class="main">
<div align="center">
<table width="100" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="59">
<li><a href="#P1A"><i class="fa fa-university fa-lg "></i></li></td>
</tr>
<tr>
<td height="59"><li><a href="#P2A"><i class="fa fa-camera-retro fa-lg"></i></li></td>
</tr>
<tr>
<td height="59"> <li><a href="#P3A"><i class="fa fa-picture-o fa-lg"></i></li></td>
</tr>
<tr>
<td height="59"><li><a href="#P4A"><i class="fa fa-comments fa-lg"></i></li></td>
</tr>
<tr>
<td height="59"><li><a href="#P5A"><i class="fa fa-tachometer fa-lg"></i></li></td>
</tr>
</table>
</div>
</nav>
3 answers
solution1
0 2015-05-15 12:11:00
我认为，要使该插件正常工作，您需要在链接中进行data-scroll 。
<a data-scroll href="#place">place</a>
solution2
0 2015-05-15 12:12:37
Check CSS tricks metod (jquery)
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});});
solution3
0 2015-05-15 13:10:12
<body>
<main>
<div class="main">
<div class="P1" id="P1">
<div id="P1A"><a name="P1A"></a></div>
<div id="P1heading">P1A</div>
</div>
<div class="P2" id="P2">
<div id="P2A"><a name="P2A"></a></div>
<div id="P2holding">P2A</div>
</div>
<div class="P3" id="P3">
<div id="P3A"><a name="P3A"></a></div>
<div id="P2holding">P3A</div>
</div>
<div class="P4" id="P4">
<div id="P4A"><a name="P4A"></a></div>
<div id="P4holding">P4A</div>
</div>
<div class="P5" id="P5">
<div id="P5A"><a name="P5A"></a></div>
<div id="P4holding">P5A</div>
</div>
</div>
</main>
<nav id="nav">
<div class="main">
<div align="center">
<table width="100" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="59">
<li><a data-scroll data-options='{ "easing": "linear" }' href="#P1A"><i class="fa fa-university fa-lg "></i>a</a></li>
</td>
</tr>
<tr>
<td height="59">
<li><a data-scroll data-options='{ "easing": "linear" }' href="#P2A"><i class="fa fa-camera-retro fa-lg"></i>s</a></li>
</td>
</tr>
<tr>
<td height="59">
<li><a data-scroll data-options='{ "easing": "linear" }' href="#P3A"><i class="fa fa-picture-o fa-lg"></i>d</a></li>
</td>
</tr>
<tr>
<td height="59">
<li><a data-scroll data-options='{ "easing": "linear" }' href="#P4A"><i class="fa fa-comments fa-lg"></i>f</a></li>
</td>
</tr>
<tr>
<td height="59">
<li><a data-scroll data-options='{ "easing": "linear" }' href="#P5A"><i class="fa fa-tachometer fa-lg"></i>g</a></li>
</td>
</tr>
</table>
</div>
</div>
</nav>
</body>
<script>
smoothScroll.init({
speed: 1000,
easing: 'easeInOutCubic',
offset: 0,
updateURL: true,
callbackBefore: function ( toggle, anchor ) {},
callbackAfter: function ( toggle, anchor ) {}
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
jQuery localScroll and smoothScroll not working
jquery smoothscroll not working on chrome
SmoothScroll is not working and blocking menu links
offset parameter not working with jquery smoothscroll plugin
Smoothscroll not working when importing html from file
smoothscroll is not working when targetting name attribute in javascript
Nav bar collapse menu is not working on mobile and table viewport
Bootstrap nav links are not working
Dropdown jquery nav not working
nav-pills is not working
Related Tags