单击滑块可更改屏幕的滚动
Slider changes scrolling of the screen when clicked
我正在 http://dev.io-web.com/portfolio.aspx 网站上工作,并且在使用我编程的滑块时遇到困难。出于某种原因,当您单击以更改幻灯片时,它会将网站上的滚动位置重置为顶部。有没有办法让它不改变屏幕的位置?我还将包含滑块的部分代码,以便更容易理解我在做什么:
$(".slide1").click(function() {
if(current_slide != "slide1"){
$(".arrow").animate({"margin-left":"349px"});
if(current_slide == "slide2"){
$(".slide2_display").stop(true,true).fadeOut().hide();
$(".slide1_display").fadeIn().show();
current_slide = "slide1";
$("#slide2content").hide();
$("#slide1content").show();
}
else if(current_slide == "slide3"){
$(".slide3_display").stop(true,true).fadeOut().hide();
$(".reps_display").fadeIn().show();
current_slide = "slide1";
$("#slide3content").hide();
$("#slide1content").show();
}
else{
$(".slide4_display").stop(true,true).fadeOut().hide();
$(".slide1_display").fadeIn().show();
current_slide = "slide1";
$("#slide4content").hide();
$("#slide1content").show();
}
}
});
我为 4 个不同的显示器中的每一个都编码了这个代码。它应该只更改显示而不更改页面的滚动,但也许单击功能会自动执行类似操作。任何解决方案的帮助将不胜感激。请随时在上面列出的网址上查看正在进行的工作。
发生这种情况是因为当您使用 jQuery.hide() 隐藏您的div 时,它的容器 .PortfolioSlider 在一瞬间被调整为 0px,因为它是空的。这会缩小页面的高度,并导致浏览器跳转到页面顶部。
只需将 660px 的固定高度应用于 的 css 即可解决此问题。投资组合滑块
相关文章:
- 如何知道元素在屏幕上是否可见.如果没有,请滚动页面
- 当canvas's的高度超过屏幕's的高度(当滚动条出现时)
- 到达屏幕末端/顶部时自动滚动
- 当用户将鼠标移到屏幕/图表上时,自动滚动将暂停.如果鼠标移动停止,自动滚动将再次恢复
- 移动/触摸屏幕 - 滑动时水平滚动
- 查找's在可见屏幕(视口)的中间,滚动时
- 一页签出滚动到下一页的屏幕底部
- 如何在滚动/调整大小时保持背景图像覆盖屏幕
- 无限滚动可在快速滚动时跳转到屏幕顶部
- 单击滑块可更改屏幕的滚动
- 使用媒体查询在较小的屏幕上仅滚动模态的距离
- 在屏幕顶部附近滚动元素时触发的侦听器
- JavaScript 用于当用户向下滚动屏幕时弹出的建议框
- 如何检查该元素是否在网页屏幕上,当有人滚动到该元素时,我也想要一个触发器
- 如何滚动以在屏幕底部设置 DIV 的底部(监视器)
- 如果没有使用跨浏览器表达式的滚动条,则无法获取屏幕宽度
- 如何根据屏幕宽度控制
- jQuery Tools 可滚动:屏幕上有 3 个项目,但一次滚动一个
- 单击时超链接向下滚动屏幕
- 滚动表格(但不滚动屏幕)