我正在进行表单验证,我想在"提交时"验证输入字段,如果错误我使用jquery.scrollTo转到错误:
$('#form_inscripcion').submit(function() {
//se traen todos los inputs del formulario
var $inputs = $('#form_inscripcion :input');
$inputs.each(function() {
var encontro_error = validar($(this)); //uses dependence ok
if (encontro_error){
$.scrollTo( 'input#'+$(this).attr('id'), 800 ); //go to error
return false; // dont submit!... but seems not enter here :(
}
});
});
问题是,当返回错误没有取消提交时,不会运行return false;行.
它工作正常
<form id="form_inscripcion" name="form" method="post" action="some" onsubmit="return false">
但是,永远不会提交.我希望你理解我:)谢谢:)
第一次在这里用户.我通常能够找到问题的答案,但我很难搞清楚这个问题.
目标:
我有一个带有侧边栏导航的页面布局,点击后会向下滚动到页面上的元素.但是,如果用户只是将页面向下滚动到特定元素,#id我希望导航中的相应链接成为.active.导航链接和相应的元素通过element#id和共享相同的值a[name].
类似于: NikeBetterWorld.com
HTML示例如下:
<nav>
<a name="value">Link</a>
</nav>
<section id="value">
content goes here
</section>
显然,有更多的部分,链接,元素等.但这是它的要点.因此,当用户向下滚动到section#value的a[value]将都获得了积极的类.
我之前在这里找到了一个有所帮助的答案,但我仍然遇到了一些问题.有关更多信息,请参阅此链接.
当前的Javascript/jQuery:
$(document).scroll(function() {
var cutoff = $(window).scrollTop();
var cutoffRange = cutoff + 200;
// Find current section and highlight nav menu
var curSec = $.find('.current');
var curID = $(curSec).attr('id');
var curNav = $.find('a[name='+curID+']');
$(curNav).addClass('active');
$('.section').each(function(){
if ($(this).offset().top > cutoff && $(this).offset().top < cutoffRange) {
$('.section').removeClass('current')
$(this).addClass('current');
return false; …我正在制作一个单页网站,顶部有经典导航.现在我将链接设置为哈希标记,以便在页面中导航:
<nav>
<a href="#about">About</a>
</nav>
...
<section id="about">...</section>
显然,这是有效的,但跳转到约一节是即时的,而不是渐进的.我正在寻找一个非常简单的实现,以便逐步过渡.我不想要任何幻想.没有轴,偏移或任何其他选项.我只是希望滚动过渡是渐进的.我想要的唯一设置是完成滚动所需的时间.另外,我想对我的标记几乎没有任何更改.我看过几个javascript插件,要求你使用锚标签来设置html文档中的位置 - 我不希望这样.这个网站看起来很有前途,但我不知道如何设置它.没有演示,所以我看不到如何设置它.我在Javascript中不是那么有文化.此外,jQuery 的ScrollTo插件太复杂了.我愿意使用一个有很多选项的插件,但我只是不希望这些选项阻止我弄清楚如何设置它.
任何帮助将非常感激!
我正在使用一小段代码(基于' ScrollTo Posts with jQuery ',它允许您单击下一个/上一个链接,它将跳转到每个帖子的顶部.
我有我的HTML结构,所以它发布>图像>发布>图像等.
我想知道如果你点击下一个/上一个按钮是否可能,它会正常滚动到下一个帖子,但是它会悬挂/悬停在images/div之间？所以它最终完成了它的滚动,但减慢了中间的div.
这是我的jQuery代码:
$(function () {
function a(f) {
var b, e, c = [],
d = $(window).scrollTop(),
g = $('.section-slide');
g.each(function () {
c.push(parseInt($(this).offset()['top'], 10))
});
for (e = 0; e < c.length; e++) {
if (f == 'next' && c[e] > d) {
b = g.get(e);
break
}
if (f == 'prev' && e > 0 && c[e] >= d) {
b = g.get(e - 1);
break
}
}
if (b) { …我在这里看到很多线程都在谈论Firefox中的闪烁,但没有一个能够描述我遇到的问题.
我有一个水平滚动网站,固定位置菜单和jquery插件.scrollTo处理下一个和上一个按钮.这在Chrome和Safari中很有效(不了解IE),但在Firefox中,每次向右滚动时都会出现闪烁,右上角有箭头.
我已经尝试将所有具有固定位置的元素设置为溢出:auto但没有做任何事情.我对JS或Jquery并不是很熟悉,但我知道可以改变一些事情.任何帮助将不胜感激!
我基本上有一个设定尺寸的div overflow: hidden.该div包含7个子div(但一次只显示一个),当我们各自的链接悬停时,我希望能够平滑地滚动它们.
但是,第一部分(div)没有链接,并且是没有链接悬停时的默认部分.
看看这个jsFiddle,看看我所说的基本结构:http://jsfiddle.net/YWnzc/
我试图用jQuery scrollTo来完成这个,但是还没能让它工作.
任何帮助将不胜感激.谢谢.
我只是想在我的浏览器窗口中滚动到特定的DOM元素或绝对位置,它不起作用.这是我的代码:
$(window)._scrollable();
$('#scene_01_down').click(function(){
$(window).scrollTo(2000,1000);
});
这是插件的文档:
好的,我再也看不到了.我正在使用scrollTo插件并在我的网站上有一个scrollTo函数.它工作,现在突然间它没有......
这是我的代码:
$(document).ready(function() {
$('header').delay(300).fadeIn(750);
$('#intro_text').delay(800).fadeIn(750);
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4v: "mi4.m4v",
ogv: "mi4.ogv",
webmv: "mi4.webm",
poster: "mi4.png"
});
},
swfPath: "js",
supplied: "webmv, ogv, m4v",
size: {
width: "570px",
height: "340px",
cssClass: "jp-video-360p"
}
});
});
$(function(toDemos) {
$('h1').click(function() {
$.scrollTo('#intro', 800);
});
});
$(function(toDemos) {
$('#contact').click(function() {
$.scrollTo('footer', 800);
});
});
$(function(toDemos) {
$('#demos').click(function() {
$.scrollTo('#content', 800);
});
});
$(function(toDemos) {
$('#toTop').click(function() {
$.scrollTo('#intro', 800);
});
});
$(function() {
$("#playlist li").on("click", function() { …我真的需要帮助解决这个问题,我对JS的了解并不是那么好.所以,基本上我想滚动到单击链接时的部分,但不是通过(href ="#target"),我想用属性来做.此外,如果可能的话,我也希望从顶部添加属性偏移量.请看一下代码,你会得到一个更清晰的图片.
HTML示例:
<nav>
<a href="#" data-attr-scroll="#section1" class="scrollto">Section 1</a>
<a href="#" data-attr-scroll="#section2" class="scrollto">Section 2</a>
<a href="#" data-attr-scroll="#section3" class="scrollto">Section 3</a>
<a href="#" data-attr-scroll="#section4" class="scrollto">Section 4</a>
<a href="#" data-attr-scroll="#section5" class="scrollto">Section 5</a>
</nav>
<div class="test" id="section1">
#1 Section
</div>
<div class="test" id="section2" data-scroll-offset="100">
#2 Section
</div>
<div class="test" id="section3">
#3 Section
</div>
<div class="test" id="section4" data-scroll-offset="200">
#4 Section
</div>
<div class="test" id="section5" data-scroll-offset="300">
#5 Section
</div>
JS例子:
jQuery(document).ready(function($) {
$(".scrollto").click(function(event) {
event.preventDefault();
var defaultAnchorOffset = 0;
var $anchor = $(this).attr('data-attr-scroll');
var anchorOffset = …我有一个带有 4 个选项卡的菜单栏，当我按下每个选项卡时，它应该向下滚动到同一页面上的相应类别（特定 ID）。这是菜单的代码：
template: `
<div class="action-container">
<div class="btn-group quick-navigation custom-group" role="group">
<a *ngFor="let section of sections" [scrollTo]="section.id" (click)="active = section.id"
class="btn btn-secondary" [class.active]="section.id == active">{{section.name}}</a>
</div>
</div>
`,
这是滚动指令：
@Directive({
selector: '[scrollTo]'
})
export class ScrollToDirective {
@Input() scrollTo: string;
@HostListener('click', ['$event']) onClick(e) {
console.log(this.scrollTo);
console.log($(`#${this.scrollTo}`).offset().top - 150);
$('html, body').animate({
scrollTop: $(`#${this.scrollTo}`).offset().top - 150
}, 500);
}
}
问题在于，多次切换选项卡后，特定元素的 offset().top-150 会发生变化，第一次会重定向到正确的元素，但之后页面会随机跳转到不同的元素。
我已附上控制台的打印屏幕。
有什么建议么？谢谢你！
