我有一个链接，点击后会获得所选链接的HREF，并将其转换为ID。
例如
/ limo /＃车辆将生成＆＃34;＃车辆＆＃34;点击（作为字符串），并应滚动到名为＆＃34; Vehicles＆＃34;
的ID/ limo /＃车辆/克莱斯勒将产生＆＃34; #Chrysler＆＃34;点击（作为字符串），并应滚动到名为＆＃34;克莱斯勒＆＃34;
的ID目前，当我选择链接时，它不会滚动，但警报显示＆＃34; #Vehicles，＆＃34;和＃34; #Chrysler＆＃34;字符串正确形成。
我试图获取id的位置，并滚动到坐标，但那也没有。
这是我的......
[code]
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
function backupNavigation_click(clicked_href)
{
var abc = clicked_href.substring(clicked_href.lastIndexOf('/') +1);
if (abc.match("^#")) {
var goTo = abc;
alert (goTo);
function(e) {
// target element id
var id = goTo;
// target element
var $id = $(id);
if ($id.length === 0) {
return;
}
// prevent standard hash navigation (avoid blinking in IE)
e.preventDefault();
// top position relative to the document
var pos = $(id).offset().top;
// animated top scrolling
$('body, html').animate({scrollTop: pos});
}
}
else{
var goTo = "#" + abc;
alert (goTo);
function(e) {
// target element id
var id = goTo;
// target element
var $id = $(id);
if ($id.length === 0) {
return;
}
// prevent standard hash navigation (avoid blinking in IE)
e.preventDefault();
// top position relative to the document
var pos = $(id).offset().top;
// animated top scrolling
$('body, html').animate({scrollTop: pos});
}
}
}
}else
{
if (window.innerWidth> 479) {
$('head').append(' <script type="text/javascript" src="js/jquery.fullPage.js">');
}
$(document).ready(function()
{
$('#fullpage').fullpage(
{
anchors: ['Home', 'Events', 'Vehicles', 'Testimonials', 'Specials', 'AboutUs', 'Quotes'],
sectionsColor: ['none', 'none', 'none','none', 'none', 'none', 'none'],
scrollOverflow: true
});
});
}
[/code]
这是我正在处理的网站的链接，如果您测试移动设备，您应该看到我在说什么，桌面版本工作正常。
<script type="text/javascript">
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
function backupNavigation_click(clicked_href)
{
var abc = clicked_href.substring(clicked_href.lastIndexOf('/') +1);
if (abc.match("^#")) {
var goTo = abc;
alert (goTo);
$('a').on("click", function(e) {
// prevent default state change
e.preventDefault();
// get href of clicked
var abc = $(this).attr('href');
// Find last '/' and get everything after
abc = abc.substring(abc.lastIndexOf('/')+1, abc.length);
// If '#' found then chop off
if(abc.indexOf('#') > -1) {
abc = abc.substring(1, abc.length);
}
console.log(abc);
// Find matching with matching id
var pos = $('#' + abc).offset().top;
console.log(pos);
// Scroll to it
$('html, body').animate({
scrollTop: pos
}, 400);
})
}
else{
var goTo = "#" + abc;
alert (goTo);
$('a').on("click", function(e) {
// prevent default state change
e.preventDefault();
// get href of clicked
var abc = $(this).attr('href');
// Find last '/' and get everything after
abc = abc.substring(abc.lastIndexOf('/')+1, abc.length);
// If '#' found then chop off
if(abc.indexOf('#') > -1) {
abc = abc.substring(1, abc.length);
}
console.log(abc);
// Find matching with matching id
var pos = $('#' + abc).offset().top;
console.log(pos);
// Scroll to it
$('html, body').animate({
scrollTop: pos
}, 400);
})
}
}
}else
{
if (window.innerWidth> 479) {
$('head').append(' <script type="text/javascript" src="js/jquery.fullPage.js">');
}
$(document).ready(function()
{
$('#fullpage').fullpage(
{
anchors: ['Home', 'Events', 'Vehicles', 'Testimonials', 'Specials', 'AboutUs', 'Quotes'],
sectionsColor: ['none', 'none', 'none','none', 'none', 'none', 'none'],
scrollOverflow: true
});
});
}
</script>
</head>
<body>
<div class="container">
<div id="TopNav" class="slide">
<header class="slide">
<!-- Add "slideRight" class to items that move right when viewing Nav Drawer -->
<ul id="navToggle" class="burger slide">
<!-- Add "slideRight" class to items that move right when viewing Nav Drawer -->
<li></li>
<li></li>
<li></li>
</ul>
<h1>EXQUISITE LIMOUSINE</h1>
</header>
<nav class="slide">
<ul>
<li class="MenuHeading active" data-menuanchor="Home"><a href="#Home" onclick="backupNavigation_click(this.href);">HOME</a></li>
<li class="MenuHeading" data-menuanchor="Events"><a href="#Events" onclick="backupNavigation_click(this.href);">EVENTS</a><i id="eTog" class="fa fa-toggle-off"></i>
<ul class="capo">
<li class="lilbuddy ace"><a href="#Events/Weddings" onclick="backupNavigation_click(this.href);">Weddings</a>
</li>
<li class="lilbuddy"><a href="#Events/Quinceaneras" onclick="backupNavigation_click(this.href);">Quinceaneras</a>
</li>
<li class="lilbuddy"><a href="#Events/SpecialEvent" onclick="backupNavigation_click(this.href);">Special Events</a>
</li>
<li class="lilbuddy"><a href="#Events/School" onclick="backupNavigation_click(this.href);">School Events</a>
</li>
<li class="lilbuddy"><a href="#Events/Corporate" onclick="backupNavigation_click(this.href);">Corporate Events</a>
</li>
</ul>
</li>
<li class="MenuHeading" data-menuanchor="Vehicles"><a href="#Vehicles" onclick="backupNavigation_click(this.href);">VEHICLES</a><i id="vTog" class="fa fa-toggle-off"></i>
<ul class="boss">
<li class="lilbuddy ace"><a href="#Vehicles/Escalade" onclick="backupNavigation_click(this.href);">4 Guests - Escalade</a>
</li>
<li class="lilbuddy"><a href="#Vehicles/Chrysler" onclick="backupNavigation_click(this.href);">10 Guests - 300C</a>
</li>
<li class="lilbuddy"><a href="#Vehicles/Frankenstein" onclick="backupNavigation_click(this.href);">22 Guests - FrankNstein</a>
</li>
<li class="lilbuddy"><a href="#Vehicles/Hummer" onclick="backupNavigation_click(this.href);">22 Guests - Hummer</a>
</li>
<li class="lilbuddy"><a href="#Vehicles/MadMax" onclick="backupNavigation_click(this.href);">25 Guests - Mad Max</a>
</li>
<li class="lilbuddy"><a href="#Vehicles/Bella" onclick="backupNavigation_click(this.href);">26 Guests - Bella</a>
</li>
<li class="lilbuddy"><a href="#Vehicles/KIT" onclick="backupNavigation_click(this.href);">26 Guests - Kit</a>
</li>
<li class="lilbuddy"><a href="#Vehicles/Rockstar" onclick="backupNavigation_click(this.href);">28 Guests - Rock Star</a>
</li>
<li class="lilbuddy"><a href="#Vehicles/MrBubbles" onclick="backupNavigation_click(this.href);">28 Guests - Bubbles</a>
</li>
<li class="lilbuddy"><a href="#Vehicles/Uno" onclick="backupNavigation_click(this.href);">30 Guests - Uno</a>
</li>
<li class="lilbuddy"><a href="#Vehicles/Hera" onclick="backupNavigation_click(this.href);">30 Guests - Hera</a>
</li>
<li class="lilbuddy"><a href="#Vehicles/Voyager" onclick="backupNavigation_click(this.href);">31 Guests - Shuttle</a>
</li>
</ul>
</li>
<li class="MenuHeading" data-menuanchor="Testimonials"><a href="#Testimonials" onclick="backupNavigation_click(this.href);">TESTIMONIALS</a></li>
<li class="MenuHeading" data-menuanchor="Specials"><a href="#Specials" onclick="backupNavigation_click(this.href);">SPECIALS</a></li>
<li class="MenuHeading" data-menuanchor="AboutUs"><a href="#AboutUs" onclick="backupNavigation_click(this.href);">ABOUT US</a></li>
<li class="MenuHeading" data-menuanchor="Quotes"><a href="#Quotes" onclick="backupNavigation_click(this.href);">GET A QUOTE</a></li>
</ul>
</nav>
</div>
<div class="content slide">
<div id="fullpage">
<div class="section " id="Section0">
<div class="row">
<div class="four columns">
<h4 class="introHeader">Limousine and party bus services for Chicagoland and the surrounding suburbs.</h4>
</div>
</div>
<div class="row introAddress">
<p> 2420 Hamilton Road</p>
<p>Arlington Heights, IL 60005</p>
<p>773-877-3050</p>
<p>Email: info@elclimo.com </p>
</div>
</div>
<div class="section" id="Section1">
<div class="slide" id="Weddings" data-anchor="Weddings">
<div class="row">
<div class="nine columns leftPad">
<h1>Weddings</h1>
<h4>Making your special day even more special, for everyone.</h4> Look to Exquisite Limousine Chicago for all the transportation you will need
leading up to and including your wedding day. Why leave anything to chance.
Arrange a special ride for all aspects of your celebration. Engagement party,
bridal shower, bachelor and bachelorette parties, rehearsal dinner and the
wedding day itself. We will make sure that all your guests and participants
are there on time.</div>
</div>
<div class="row">
<div class="three columns leftPad">
<h5>Bridal Shower</h5> Having your bridal shower at a great club or restaurant? Rent one of our Party
Buses or stretch limos and make sure everyone is there on time. No more fumbling
with gifts or party favors and finding a parking spot. Pick up and drop off
services are available.</div>
<div class="three columns">
<h5>Bachelor / Bachelorette Parties</h5> No one wants to be the responsible one at a bachelor or bachelorette party.
Music and refreshments of your choice are ready and waiting
for you. Our chauffeur can pick you up and drop you off, or you can block his
time out for the night if you plan to hop from place to place. </div>
<div class="three columns">
<h5>Rehearsal Dinner</h5>Rent
one of our stretch limos or one of our party buses and get everyone to the
rehearsal dinner at the same time. The introductions and fun start on the ride
over. By the time you arrive at the restaurant, everyone knows each other and
the dinner is off to a great start.</div>
答案 0 :(得分：0)
这是我做的：
// a onclick
$('a').on("click", function(e) {
// prevent default state change
e.preventDefault();
// get href of clicked
var abc = $(this).attr('href');
// Find last '/' and get everything after
abc = abc.substring(abc.lastIndexOf('/')+1, abc.length);
// If '#' found then chop off
if(abc.indexOf('#') > -1) {
abc = abc.substring(1, abc.length);
}
console.log(abc);
// Find matching with matching id
var pos = $('#' + abc).offset().top;
console.log(pos);
// Scroll to it
$('html, body').animate({
scrollTop: pos
}, 400);
})
这是我使用任意HTML的JSFiddle：https://jsfiddle.net/ae2eck7c/2/