[英]Boostrap Carousel Scroll clashing with JS page scroller
我正在使用JS腳本,該腳本從Nav的深度偏移頁面內容,但是這干擾了我的頁面滾動(使用id作為錨點)-我不知道如何更正此問題,因此不了解JS。 任何幫助將不勝感激。
這是我的JS:
function scroll_if_anchor(href) {
href = typeof(href) == "string" ? href : $(this).attr("href");
// You could easily calculate this dynamically if you prefer
var mq = window.matchMedia( "(max-width: 991px)" );
if (mq.matches) {
var fromTop = 0;
}
else {
var fromTop = 130;
}
// If our Href points to a valid, non-empty anchor, and is on the same page (e.g. #foo)
// Legacy jQuery and IE7 may have issues: http://stackoverflow.com/q/1593174
if(href.indexOf("#") == 0) {
var $target = $(href);
// Older browser without pushState might flicker here, as they momentarily
// jump to the wrong position (IE < 10)
if($target.length) {
$('html, body').animate({ scrollTop: $target.offset().top - fromTop });
if(history && "pushState" in history) {
history.pushState({}, document.title, window.location.pathname + href);
return false;
}
}
}
}
這是我的HTML
<div id="carousel1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<?php
$loop = new WP_Query(array(
'post_type' => 'banner', 'orderyby' => 'post_id', 'order' => 'ASC',
'posts_per_page' => 1
));
while ( $loop->have_posts() ) :
$loop->the_post();
?>
<div class="item active">
<?php the_post_thumbnail('full');?>
</div><!-- item active -->
<?php
endwhile;
wp_reset_postdata();
?>
<?php
$loop = new WP_Query(array(
'post_type' => 'banner', 'orderyby' => 'post_id', 'order' => 'ASC',
'posts_per_page' => 10,
'offset' => 1
));
while ( $loop->have_posts() ) :
$loop->the_post();
?>
<div class="item">
<?php the_post_thumbnail('full');?>
</div><!-- item -->
<?php
endwhile;
wp_reset_postdata();
?>
</div> <!-- CAROUSEL inner -->
<a class="left carousel-control" href="#carousel1" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel1" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>
</div> <!-- CAROUSEL -->
我找到了解決方案:
$(document).ready(function(){
// Enable Carousel Controls
$(".left").click(function(){
$("#carousel1").carousel("prev");
});
$(".right").click(function(){
$("#carousel1").carousel("next");
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.