点击页面的按钮,使之打开一个新窗口(点击按钮在另一个页面显示内容)

lxf2023-07-15 15:10:01
在一个html页面中,需要实现两个功能,上一个按钮和下一个按钮。例如,我需要用户关注第5、10和20行,所以当用户在第5行时,单击“下一步按钮”。 您可以跳到第10行,再次单击next按钮跳到第20行,然后单击previous按钮。同样,如何实现这两个功能? 就是在当前html页面的不同行之间跳转。 我需要知道用户的当前行,才能判断是否跳回讨论(解决方案)改变主意。我只需要操作垂直滚动条,效果是一样的。 无论哪一行,都对应一个滚动条的位置。向下跳意味着向下滑动滚动条。 方法是检测和设置窗口 例如,在第五行中,window.scrollTop已经有了相应的值。 如果你想再往下跳5行到第10行,根据你的行高属性乘以5,你就会得到你应该往下滑多少:window . scroll top = window . scroll top+你的行高* 5;以便滑块向下滑动到指定位置。 这样,两个按钮都出来了。 回复错了。您应该使用window.scrollTo方法。获取offsetX和offsetY并将其传递给line scrollTo要跳转,添加一个锚点,goto1浏览器url设置window . location = window . location . href . split(' # ')[0]+' # goto 1 '找到一个滚动插件,基于JQ的var bookmark scroll = { setting:{ duration:1000,yoffset: 0},//{duration _ of _ scroll _ millions,offset _ from _ target _ element _ to _ rest } top keyword:' # top ',//您的锚点和scrollTo中使用的关键字(dest==this.topkeyword?0 : $('#'+dest)) : (dest)?$(dest):[]//获取基于id、topkeyword或dom refif的元素($dest===0 || $dest.length==1 &&(!options . autorun | | options . autorun & & math . ABS($dest . offset()。top+(options . yoffset | | this . setting . yoffset)-$(窗口)。scrollTop())>5)){这个。$ body . animate({ scroll top:($ dest = = = 0)?0 : $dest.offset()。top+(options . yoffset | | this . setting . yoffset)},(options . duration | | this . setting . duration),function(){ if($dest!= = 0 & & hash)location . hash = hash })} },urlparamselect:function(){ var param = window . location . search . match(/scroll to =[\ w \-_,]+/I)//搜索scroll to = divide return(param)?param[0]。split(' = ')[1]:null },init:function(){ jQuery(document)。ready(function($){ var main obj = bookmarkscrollmainobj。$body=(window.opera)?(document . compat mode = = " cs S1 compat "?$(' html '):$(' body '):$(' html,body ')var urlselectid = main obj . urlparamselect()//获取page.htm的div?scroll to = dividif(URL selectid)//if id definedsetTimeout(function(){ main obj . scroll to(document . getelementbyid(URL selectid)| | $(' a[name = '+URL selectid+']:eq(0)')。get(0),{autorun:true})},100)$('a[href^="#"]').each(function(){//使用“#”前缀var hash value = this . get attribute(' href ')遍历链接。match(/#\ w+$/i) //filter链接“#”前缀后至少有1个字符hashvalue=(hashvalue)?散列值[0]。substring(1):null//strip " # " from hashvalueif(this . hash . length > 1){//如果哈希值不止" # " var $ bookmark = $(' a[name = '+this . hash . substr(1)+']:eq(0)')if($ bookmark . length = = 1 | | this . hash = = main obj . top keyword){//如果具有给定ID的HTML锚存在或href = = top keyword if($ bookmark . length = = 1 &!document.all) //non IE,或IE7+$ bookmark . html(' . ').css({position:'absolute ',fontSize:1,visibility:' hidden ' })$(this)。click(function(e){ main obj . scroll to((this . hash = = main obj . top keyword)?main obj . top keyword:$ bookmark . get(0),{},This。hash) e.prevent default ()}}})}}}书签滚动。init()The big day getting here registry寄语adminjs.cn是一家以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。 我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在这个网站中,您可以学习最新的前端开发技术,了解前端开发的最新趋势和最佳实践。 我们提供丰富的教程和案例,让您快速掌握前端开发的核心技术和流程。 Adminjs.cn还提供了一系列实用的工具和插件,帮助你更高效的进行前端开发。 我们提供的工具和插件都是经过精心设计和优化的,可以帮助您节省时间和精力,提高开发效率。 在Adminjs.cn,你可以找到让你成为更优秀的前端开发者所需的所有前端开发资源。 欢迎加入我们的大家庭,一起探索前端开发的无限可能!